20250305 데브코스 프론트엔드 Day1, 2

March 5, 2025

💡 인사이트

before과 after는 반드시 content와 함께 사용해야 한다. 빈값이면 content = ‘’ 추가.

웹접근성이란?

어떠한 사용자(장애인, 노인 등)가 어떠한 기술 환경에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장 하는 것
금융기관 / 증권사는 반드시 지켜야 함.
증권사는 크로스 브라우징 하이버전까지 다 체크한다고 함. (하이버전 - 크롬 + 익스까지 맞춘다)

KWCAG : 한국형 웹 컨텐츠 접근성 지침

접근성 진단 프로그램

KWCAG a11y : 대각선 길이 측정
Colour Contrast Analyser : 배경색 명도
OpenWAX : 접근성 자동 진단 = W3C Validation : 웹 표준 검사 사이트

HTML

블록 요소

margin, paddig 상하좌우 모두

인라인 요소

margin 좌우만 가능. 상하 안됨
padding 상하좌우 모두 가능

Headings

h1 부터 순서대로 사용할 것
로고는 고민없이 h1

ul 태그

순서가 필요없는 목록

ol 태그

순서가 필요한 목록

dl 태그

용어가 있고<dt> 용어에 해당하는 설명<dd>이 들어갈 때
<dd> 안에 <ul> 태그 넣어서 사용해도 됨

img 태그

크로스 브라우징 엄격하게 하고 싶으면(ex 버전 안버릴거면) height=”” width=”” 이렇게 속성만 있고 값이 없으면 안됨.

table 태그

머리 꼬리 몸
thead - tfoot(결과값 표현) - tbody
thead안에는 td가 들어가지 못한다. th(제목)만 사용한다.
tbody나 tfoot에도 제목이면 th 태그를 사용.
내용은 td. td에는 headers속성이 들어가는데 이것이 읽는 방법을 알려줌. (headers = wp j1)

셀병합 colspan = “2” : 2개의 열을 병합했다
rowspan = “2” : 2개의 행을 병합했다

form 태그

fieldset
label 태그의 for 속성과 input 태그의 id 속성은 맞춰줘야한다.
label이 클릭 시 체크 박스 확장을 도와줌
radio 버튼
여러 가지 중 하나 선택 가능
select
메뉴 많은 경우 optgroup 태그 사용 가능

Strong / em / address / abbr

strong, em 은 강조 태그
address는 사이트를 관리하는 사람에 address 사용. 근데 그냥 span 사용해도 됨.
abbr은 도움말 보여주는 태그

header, footer 태그

section안에 header와 footer 또 넣을 수 있어서. header와 footer는 여러번 들어가도 된다.

section, article, time 태그

section은 문서 안의 장이나 절
article은 뉴스 사이트 기사, 블로그 기사처럼 독립적인 컨텐츠

aside 태그

본문 컨텐츠와 상관없는 보충기사나 사이드바 광고

figure / figcaption

figcaption은 이미지 밑에 설명 캡션
figure는
1. 본문에서 떼어낼 수 있는 경우. 떼어낼 수 없을때는 쓰면 안됨. 잘 모르겠으면 그냥 figure쓰지 말고 img 쓸것
2. 동일페이지 안에서 이동가능할 때,
3. 전용페이지나 부록같은 별도의 페이지 등으로 이동가능할 때,
4. 그림, 도표, 코드, 일러스트, 사진 등에 사용.

CSS

CSS 스타일 선언 방법

외부 css 스타일

<link rel="stylesheet" type="text/css" href="css파일명.css"/>

내부 css 스타일

<style>
  ...
</style>

인라인 css 스타일 (사용 하지말 것. 유지보수 어려움.)

<body style="...">

우선순위

인라인 스타일(1000점) > id 선택자(100점) > class선택자(10점) > 태그(요소)(1점)

first-child, last-child

first-child : 첫번째 자식
last-child : 마지막자식

선택자

자식선택자 : >
ie.div > h2{background-color: salmon;}
인접선택자 +
ie. h2 + p{background-color: deepskyblue;} <- h2 태그와 인접한 p 태그만 배경색 적용됨.
속성선택자 []
ie. a[target="_blank"]{background-color: yellow;} <- target=”_blank”인 a 태그만 배경색 적용됨.
하위 선택자
ie. div p{background-color: darkkhaki;} <- div 아래 p 태그만 배경색 적용됨.
전체 선택자 *
ie. div[class*="test"]{background-color:green;} <- class값으로 test 들어가는 모든 div 태그에 배경색 적용됨.

자식선택자는 바로 밑에 자식만 적용됨.
하위선택자는 하위에 있는 자식, 자손에 해당하는 모든 요소에 적용됨.

before, after

반드시 content가 들어가야 됨.

rem, em, px, fr(백분율 %), vw(vh)

글자는 percentage로 하지 않는다

a 태그 스타일

a:link{color:black; text-decoration: none;} /* 링크 걸린 현재 상태 */
a:visited{color: rgb(255, 66, 98);} /* 이미 방문한 링크 */
a:hover{color: orange; font-weight: 900;} /* 마우스 링크에 올렸을 때 */
a:active{color: skyblue; font-style: italic;} /* 클릭했을 때 */
a:focus{background-color: yellow;} /* 마우스로 클릭하거나 탭으로 클릭했을 때 */

실제로 작업할 때는 아래와 같이 묶어서 작업한다.

a:link,
a:visited{

}

a:hover,
a:active,
a:focus{

}

인라인 요소와 블록 요소

인라인 요소는 width, text-align 지정할 수 x. margin은 좌우만 적용 o. padding은 o
블록 요소는 다 o.

background-color

background-color 코드가 background: url() 코드보다 먼저 오면 안 칠해진다.
따라서 배경이미지와 배경 색상을 동시에 적용시 색상은 반드시 마지막에 지정해야 한다.