css7 KDT 5th 웹개발자 입문 수업 2일차 -3 CSS 1. 구글 확장프로그램 중 web developer 를 설치 -> CSS disabled 가능하므로 css 없는 웹 사이트를 확인해보자 2. 역사 HTML5 이전 버전에서는 HTML 자체에서 style을 컨트롤 할 수 있는 태그 (, 등)을 사용했지만 디자인적 요소를 같이 두면 혼란스러워서 HTML5부터는 디자인을 분리한다. 그래서 HTML은 디자인 요소를 제외한 텍스트를 전달하는 문서이자 문서의 구조로만 사용 3. css 참조 방식 1) 인라인 css 요소의 style 속성(style=" ... ")으로 직접 스타일을 작성하는 방식 -> 선택자 없음 같은 스타일을 가진 태그를 사용하더라도 코드를 복붙이 필요... 재사용 불가 2) 내장 style - 태그 사이에 로 넣어줌, 선택자를 사용해줌 2.. 2023. 1. 27. FlexBox 정리 인터페이스 안 아이템 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 즉, 레이아웃을 다룰 때 1번에 1개의 차원(행 또는 열)을 다룬다는 의미임. (2차원 모델인 Grid 레이아웃도 있음) flex-direction 속성을 사용하여 축을 지정하며 주축(Main Axis)과 교차축(Cross Axis)으로 flexbox를 동작한다 flex-direction 값 동작 주축 row row-reverse 인라인 방향으로 행을 따름 column column-reverse 블록 방향으로 열을 따름 교차축 row row-reverse 열 방향을 따름 column column-reverse 행 방향을 따름 reverse는 말그대로 시작선과 끝선을 반대로 바꾼다는 것임 주축과 교차축은 서로 수직임을 잊지 .. 2022. 12. 14. Css? 기존의 html 속성인 style을 한번에 Element에 적용하기 위해 CSS 사용 방법 Element 속성 중 style="..." 사용 사이에 1. Selector - 선택자의 구분자는 , 임 1) 전체 선택자 : * 2) 태그 선택자 : 태그명 (ex. a, p, ...) - 해당 태그에 속하면 모두 스타일이 지정됨 3) 클래스 선택자 : .클래스명 - class="클래스명"으로 태그 속성에 넣어줘서 지정해줌 - 구분자는 공백 4) id 선택자 : #id명 - id="id명"으로 지정된 Element로, id명은 유일해야 함 5) 하위 선택자 : 기준태그 하위태그 - 해당 기준태그 아래 하위태그 모두 적용 6) 자식 선택자 : 기준태그 > 자식태그 id선택자 > class선택자 > 태그 선택자 순.. 2022. 12. 13. 이전 1 2 다음
