> 느낀점 <
웹 퍼블리싱 강의를 듣는 도중 css면에서 아무것도 못알아 들어 기본 강의를 들음..
정말 뭐라고 하는지 단 1도 모르겠더라..
듣고나니 이제서야 하나둘씩 퍼즐이 맞춰지기 시작함
> 공부한 내용 <
https://www.youtube.com/playlist?list=PLFeNz2ojQZjuRTQGNUf6ZTz8-YRLgFFvZ
입문자를 위한 CSS 기초 강의
www.youtube.com
css코드는 선택차, 중괄호 영역, 속성명, 속성값 등으로 구분됨
css코드에도 주석을 사용 할수 있다. ( 단축키 : 컨트롤 + / )
css코드를 html 문서에 적용하기 위해서는 인라인 스타일, 스타일 태그, 외부 문서 연결 등의 방식을 사용해야함.
선택자는 어떤 요소에 대한 스타일을 정의할 것인지에 대한 정보
전체 선택자 => * {}
태그 선택자 => 태그이름 {}
클래스 선택자 => .클래스이름 {}
아이디 선택자 => #아이디이름 {}
font-family : 글꼴을 지정하는 속성이며, 여러 글꼴을 연달아 기입하여 우선순의를 지정할 수 있음
font-size : 글자 크기를 지정하는 속성이며, px, rem, em 등의 단위를 사용 할 수 있다.
text-align : 블록 내에서 텍스트의 정렬 방식을 정의한다.
color : 다양한 방법으로 텍스트의 색상을 정의한다.
display : 요소의 블록 레벨, 인라인 여부를 변경, 레이아웃을 결정 할 때도 사용된다.
border : 요소가 차지하는 영역에 테두리를 그릴 수 있다. ( 하위 속성 : border-style, border-width, border-color )
padding : 안쪽의 면에 여백을 정의할 때 사용
margin : 바깥쪽의 여백을 정의할 때 사용
box-sizing : 너비와 높이가 포함할 영역을 변경함으로써 너비와 높이의 계산 방법을 결정 ( 기본값 : content-box , 단 border-box의 경우 테두리까지 너비와 높이에 포함 )
background : 콘텐츠의 배경을 정의
float : 요소가 자신을 포함하고 있는 컨테이너의 왼쪽이나 오른쪽에 배치하게함
clear : float 요소 이후에 표시되는 요소가 float 요소의 아래로 내려가게 할 수 있음
position : 문서상에 요소를 배치하는 방법을 정의 ( 기본값 : static )
relative : 자기의 원래 위치를 기준으로 오프셋을 적용
absolute : 가장 가까운 포지션 요소를 기준으로 오프셋을 적용
fixed : 고정되어 움직이지 않음. 스크롤 이동에도 꼼짝하지않음
sticky : 스크롤 되는 상위 요소를 기준으로 오프셋을 적용
flexbox : 박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 ( 행 또는 열이 주축이 되어 요소의 정렬 방향을 결정 )
flex-direction : 요소를 배치 할 때 사용할 주축 및 방향을 지정
justify-content : flexbox 주축에서의 요소 배치 방법을 정의
align-items : flexbox 교차축에서의 요소 배치 방법을 정의
align-self : flexbox내 개별 요소의 교차축 배치 방법 정의
flex-wrap : 개별 요소들의 도합 크기가 컨테이너 주축 길이보다 커졌을 때의 처리 방법 및 방향 정의
inherit : 상위 요소로부터 값을 물려받음
initial : 기본값 (초기값)을 사용하겠다는 의미
unset : 상위 요소로부터 물려받을 수 있으면 물려받고 그럴 수 없으면 기본값을 사용하겠다는 의미
z-index : 요소가 쌓이는 순서를 결정 ( 기본값 : auto )
hover : 마우스 오버
active : 클릭 시 활성화
> 할 일 <
직접 css를 사용하여 css 만들어보기