본문 바로가기

CSS3

CSS_색상, 박스모델, 포지션과 레이아웃 CSS에서 색상 표현하는 방법 색이름으로 표현하기 16진수 표기법으로 표현하기 16진수 표기법으로 표현하기-2- 무채색으로 표현하기 박스모델 모든 HTML 엘리먼트(태그) 박스처럼 다루어진다 화면 디자인, 화면의 레이아웃을 구성할 때 HTML 엘리먼트(태그)를 박스처럼 다루게 되는데, 이를 박스모델이라고 한다 박스모델의 구성 HTML의 모든 엘리먼트(태그)는 margin, border, padding, content로 구성된다 margin 테두리(border)의 바깥여백, 다른 엘리먼트와의 경계 border 엘리먼트의 테두리, padding과 contents를 감싸고 있다 padding 테두리(border)와 contents 사이의 여백, contents를 감싸고 있다 contents 박스모델이 가지는 .. 2023. 12. 28.
CSS_CSS, 선택자와 선택자 종류 CSS(Cascading Style Sheets) HTML 문서가 웹브라우져의 화면, 인쇄물 혹은 여러 미디어에 어떻게 표현될지를 정의하는 언어다 CSS는 화면의 레이아웃, 텍스트 형식, 애니메이션 효과, 3D효과 등을 설정할 수 있다 HTML 문서에 대한 디자인적인 요소를 담당 CSS 문법 Selector(선택자)Declaration(CSS 선언) h1 {color:blue; font-size:12px;} * 선택자 스타일을 적용할 대상 엘리먼트(태그)를 지정한다. * CSS 선언 선택자에서 지정한 엘리먼트에 적용할 스타일을 선언한다. 각각의 CSS선언은 세미콜론으로 구분한다. CSS선언은 PropertyName:PropertyValue로 구성된다. CSS 적용방법 Inline CSS 하나의 엘리먼트에.. 2023. 12. 27.
HTML_inline과 block, id와 class 블록 엘리먼트(태그) 항상 새로운 줄에서 시작 항상 사용가능한 최대 너비를 차지한다 블록 엘리먼트의 왼쪽이나 오른쪽에는 다른 엘리먼트가 위치할 수 없다 블록 엘리먼트의 너비를 지정할 수 있다 블록 엘리먼트의 컨텐츠에 대해서 정렬할 수 있다 대표적인 블록 엘리먼트 종류 ~ div 엘리먼트 컨테이너 엘리먼트 컨테이너 엘리먼트는 다른 엘리먼트를 담는 용도로 사용되는 엘리먼트다 컨테이너 엘리먼트는 여러 엘리먼트를 묶어서 하나의 그룹으로 다룰 수 있게 한다 모든 블록 엘리먼트와 모든 인라인 엘리먼트를 포함할 수 있고, 다른 div 엘리먼트도 포함할 수 있다 html 문서에서는 div 엘리먼트를 사용해서 여러 엘리먼트를 그룹으로 묶고, 그룹단위로 스타일 적용, 엘리먼트 조작 등을 수행한다 인라인 엘리먼트(태그) 새.. 2023. 12. 26.