개발자도전

기존 영역 분할에 사용한 div, span 태그는 태그의 이름만 봤을 때 나눈다는 것 이외의 의미를 파악할 수 없다. -> id 또는 class 속성을 필수적으로 추가해야하는 번거로움이 있음. semantic tag = 시맨틱 태그, 의미있는 태그 태그의 이름만으로 어느 정도 어떤 역할을 하는지 알 수 있음. 웹 접근성 향상에 도움 div 태그의 이름만 바뀐 것으로 생각하면 좋음. 시맨틱 태그 종류 : 현재 문서의 주된 콘테츠를 작성하는 영역 : 문서의 제목, 머리말 영역 : 문서의 하단 부분, 꼬릿말, 정보 작성 영역 : 나침반 역할(다른 페이지, 사이트로 이동)의 링크 작성 영역 : 사이드바, 광고 등을 표시하는 양쪽 영역 : 구역을 구분하기 위한 영역 : 본문과 독립된 콘텐츠를 작성하는 영역

order item이 main-axis 방향으로 배치되는 순서를 지정하는 속성 HTML 작성 화면 CSS 작성 화면 웹에서 출력된 화면 flex-grow(팽창) item이 flex-container 내부에서 비어있는 공간을 매꿀 수 있도록 팽창하는 정도를 지정하는 속성 HTML 작성 화면 CSS 작성 화면 웹에서 출력된 화면 - flex-grow 크기만큼 팽창 flex-shrink (수축) flex-container가 줄어들 때 내부 item의 수축하는 정도를 지정하는 속성 (flex-wrap : nowrap; 일때 만 적용) HTML 작성 화면 CSS 작성 화면 웹에서 출력된 화면 flex-basis main-axis 방향으로 item이 차지하는 크기를 지정하는 속성 각종 크기 단위 사용 가능 (px,..

FlexBox 요소의 정렬되는 방향, 순서, 요소 간의 간격을 개발자가 수치적으로 처리하지 않아도 알아서 유연하게 처리해주는 형식. flex 작성법 -> display : flex; FlexBox구성 flex-container : 정렬이 필요한 요소를 감싸는 요소 item : 정렬이 필요한 요소(정렬 적용 대상) flex 관련 css 속성이 flex-container와 item이 구문이 나누어져 있음. FlexBox의 축(axis) 중심축(main axis) 교차축, 반대축 (cross axis) flex-direction(방향) main-axis(중심축)의 방향과 시작 위치를 지정 가로 방향(행, 기본값) : row 가로 역방향 : row-reverse 세로 방향(열) : columns 세로 역방향 :..

transform : 변형과 관련된 속성 CSS 속성 작성 시 크로스 브라우저(브라우저 달라지는 경우) 처리 방법 -ms- : 마이크로 소프트(익스플로러, 엣지) -webkit : 크롬, 사파리 -o- : 오페라 -moz- : 파이어폭스 2차원 변형 - 이동 HTML 작성 화면 CSS 작성 화면 좌우 움직인 웹에서 출력된 화면 상하 움직인 웹에서 출력된 화면 대각선 움직인 웹에서 출력된 화면 2차원 변형 - 확대/축소 HTML 작성 화면 CSS 작성 화면 가로 방향 확대 웹에서 출력된 화면 세로 방향 확대 웹에서 출력된 화면 대각선 방향 확대 웹에서 출력된 화면 대각선 방향 확대 웹에서 출력된 화면 3차원 변형 - 회전 HTML 작성 화면 CSS 작성 화면 x, y, z 축 이동 웹에서 출력된 화면 x축..

font-size : 글꼴의 크기를 지정하는 속성 고정 크기단위 1. px 고정 크기 단위 2. pt (포인트 1pt == 0.35mm) 가변 크기 단위 1. % : 상위 요소 크기에 대한 백분율 가변 크기 단위 2. em : 상위 요소의 글꼴 크기에 대한 비율(1em == 100% | 1.2em == 120%) HTML 작성 화면 CSS 작성 화면 웹에서 출력된 화면 font-weight : 글꼴의 굵기(두께)를 지정하는 속성 bold : 부모 요소 보다 굵게 lighter : 부모 요소 보다 얇게 number(100~900, 100단위) : 가중치 - 숫자가 클수록 두꺼움. 100 ~ 500 : normal 600 ~ 900 : bold로 처리 HTML 작성 화면 CSS 작성 화면 웹에서 출력된 화면..

color : 글자 색을 지정하는 속성 작성법 1 : 색상명(영문) 작성법 2 : 16진수 숫자 ( ex- #fff, #ffffff) 작성법 3 : rgb(255, 255, 255) 작성법 4 : rgba(255, 255, 255, 255) 작성법 5 : hsl(360, 100%, 100%) 작성법 6 : hsla(360, 100%, 100%, 100%, 1) 16진수 ( 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f) rgb(빛의 3원색), hsl(색조, 채도, 밝기) rgba, hsla에서 a는 투명도( 0(투명) ~ 1(불투명) ) 6가지의 색 지정 방식은 모든 색상 관련 속성에서 사용 가능 HTML 작성 화면 CSS 작성 화면 1. - 글씨 크기와 굵기 지정 ..