CSS

CSS는 HTML과 함께 웹을 구성하는 기본 프로그래밍 요소 HTML이 텍스트나 이미지, 표와 같은 구성 요소를 웹 문서에 넣어 뼈대를 만드는 것이라면 CSS는 색상이나 크기, 이미지 크기나 위치, 배치 방법 등 웹 문서의 디자인 요소를 담당CSS는 HTML로 부터 디

특정한 HTML 태그를 선택할 때 사용하는 기능참조 W3C 공식문서예시출력예시출력\|예시출력예시출력여러개의 클래스 속성 사용가능예시출력예시출력예시출력예시출력

CSS3에서 사용하는 크기 단위는 %, em, cm, mm, inch, px 주로 위의 표의 단위를 사용함예시출력퍼센트 단위는 기본 설정된 크기에서 상대적으로 키기를 지정100%가 초기에 설정된 크기em 단위는 배수를 나타내는 단위 1배=1em=100% 1.5배=1.5

태그가 화면에 보이는 방식을 지정하는 속성요소를 어떻게 보여줄지 결정요소를 렌더링하지 않도록 설정visibility 속성을 hidden으로 설정한것과 달리, 영역도 차지 하지 않음기본적으로 가로 영역을 모두 채움block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼

출력📃box-sizing 속성

예시출력border 위의 설명을 보면와 같기 때문에와 같이 구현해도 상관 없다CSS3에 추가된 속성radius를 사용하면 테두리가 둥근 사각형 또는 원을 만들 수 있음예시출력모서리 각각 크기를 적용할 수 도 있음출력

글자와 관련된 스타일 속성h1 태그의 기본 크기는 32픽셀p 태그의 기본 크기는 16픽셀예시출력폰트를 지정하는 스타일 속성예시출력폰트의 기울기 또는 두께를 조정하는 스타일 속성예시출력글자의 높이를 지정CSS block 형식을 가지는 태그를 수직 정렬할 수 있는 스타일

프로그램을 개발할 때는 요소의 위치를 2가지 방법으로 설정절대 위치 좌표 - 요소의 X좌표와 Y좌표를 설정해 절대 위치 지정상대 위치 좌표 - 요소를 입력한 순서를 통해 상대적으로 위치 지정상대 위치 좌표를 설정할 때는 position 속성에 static 키워드 or

부유하는 대상을 만들 때 사용하는 스타일 속성예시출력float 속성을 추가하면예시출력예시출력right 키워드 적용예시출력자손에 float 속성을 적용하면 부모의 overflow 속성에 hidden 키워드를 적용예시출력body 태그 중앙 정렬예시출력중앙 정렬 및 floa

clear:both 를 사용하면 float으로 일그러진 레이아웃을 쉽게 초기화 가능

태그에 그림자를 부여해주는 스타일 속성글자에 그림자를 부여하는 스타일 속성예시출력예시출력

레이아웃을 만들 떄 가장 중요한것은 공간 분할웹 페이지 구상웹 페이지 구성 영역 분리구성 영역을 행 단위로 분리나누어진 행의 내부 요소 분리 실제 웹 페이지를 만들 떄는 이렇게 style 태그를 많이 만들 필요가 없다.각 부분을 쪼개서 설명하기 위해 여러 개 만들었음초

📃콘텐츠 구성 출력 \#content 스타일 추가 출력 📃본문 구성 출력 \#main_section 스타일 추가 출력