Developer

CSS 요소의 레이아웃[위치, 정렬] display* position* flexible layout* grid layout* 미디어쿼리, 컨테이너, 트랜지션, 트랜스폼, 애니메이션... display : 해당 요소를 사용자에게 어떻게 보여줄 것인가 block 크기를 원하는대로 지정 가능 한 줄 전체 너비를 차지함 (div, p, header, footer, h1~h6, ...) inline 크기 지정 불가 안에 있는 컨텐츠만큼 지정 이웃하는 요소와 나란히 배치되는 특징 ex. a, span, img, ... inline-block inline과 block 속성 모두를 갖고 있는 것 이웃하는 요소와 나란히 배치되고, 크기 지정도 가능 ex. input, ... none 보이지 않는 상태 사용자 화면에서 자..

박스모델 : HTML 요소(태그)는 사각형의 모양을 하고 있다 구성요소에는 테두리 내용물 안쪽여백과 바깥여백 패딩, 마진 패딩: 안쪽 여백 마진: 바깥 여백 ex. padding(margin): 위오아왼 (시계방향) : 위 오왼 아래 : 위아 오왼 : 모두 ex. padding: 9px 3px 2px 5px; 만약 한 방향만 padding 이나 margin을 주어야 한다면 padding: 0 0 16px 0 padding-bottom: 16px; // padding vs padding-bottom의 우선순위는 같음 ; 나중에 나온 것이 덮어씀 top, bottom, right, left 박스사이징 태그(요소)의 크기를 어떤 것을 기준으로 계산할 것인가 box-sizing content-box(기본값) 내..

CSS 속성: 크기(단위) px 절대 크기 지정 방식 내가 정해준 크기가 무조건 적용 rem 문서 요소 최상위 태그 = html의 font-size와의 배율 1rem = 16px (html font-size default value = 16) 2rem = 32px em 상위 요소(부모) font-size의 배율 1.5em = 부모 요소 font-size 1.5배 * 아주 특별한 경우에만 사용 ; 미디어 쿼리 % 부모 요소(상위 요소) 혹은 기준이 되는 요소와의 [비율] * 가장 가까운 요인이 되는 요소와의 비율 ; px, rem, em, & 중 px, rem, &을 대부분 많이 사용 vw(viewpoint width), vh(viewpoint height) 100vw ; 사용자 해상도의 100% 길이 ;..

Text CSS 속성 ** color : 텍스트 색상 letter-spacing : 자간, 문자 단위 간격 word-spacking : 단어 사이 간격 (띄어쓰기 간격) ** text-align : 텍스트 정렬(left, right, center) ** line-height : 줄간 (줄과 줄 사이의 간격) * text-indent : 첫 줄 들여쓰기 (상품목록이나 매거진 사이트에서 들여쓰기가 되어 있는 상태가 많다 ; 다른 곳에서는 잘 쓰지 않음) * text-decoration : 텍스트의 여러 효과(밑줄) 설정하거나 제거 text-transform : 영문자 대소문자 결정 font-variant : 소문자를 더 작은 크기의 대문자로 변환 * text-shadow : 텍스트의 그림자, 번짐 효과 등을..

CSS? ; Cascading Styled Sheets THML 문서에 style 속성을 추가하여 시각적으로 꾸며주는 역할 디자인 부분을 담당 CSS 적용법 (스타일링 기법) 내부스타일링 HTML 문서의 외부스타일링 HTML 문서의 인라인스타일링 요소 안에 직접적으로 style 속성을 활용하여 적용 ex) ... 내부 외부를 포함한 어떠한 CSS보다도 우선순위가 가장 높다 => 내부 스타일 : 한 html 문서 안에 작성 외부 스타일 : html 문서 외부에 작성 인라인 스타일 : 요소 안에 직접적으로 작성 선택자 : 전체 선택자, 요소 선택자, id/class 선택자, 그룹 선택자, 가족 선택자, 속성 선택자, 가상 클래스 선택자, 가상 요소 선택자 CSS 문법 ---- { ... CSS } 전체 선택..