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 보이지 않는 상태 사용자 화면에서 자..

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 } 전체 선택..

시멘틱 웹 태그 전 세계에 만들어진 웹 사이트가 증가함에 따라 검색 엔진이 사용자가 요구하는 정확하고 가치 있는 정보를 탐색하기 위해 요구하는 사항이 증가 따라서 검색 엔진이 해당 웹 사이트의 정보를 더 쉽게 알 수 있도록 태그에 해당 태그의 역할을 통해 이름을 지어주는 것 시멘틱 웹 태그의 장점 1. 웹 접근성 : 웹 사이트를 사용하는 어느 누구라도 불편함 없이 평등하게 이용할 수 있도록 접근성 자체를 높이는 행위 2. 검색 엔진 최적화 (SEO) : 검색 엔진이 해당 웹 사이트의 정보를 더 쉽게 알 수 있도록 태그에 해당 태그의 역할을 통해 이름을 지어주는 것 3. 가독성 ex. ... ... ... ------------------------------------------------- ... ....