오늘은 html이후로 포이마웹에서 css를 공부하다 이게 글을 읽는건지 코딩을 배우는 건지 현타가 와서 토이프로젝트를 하나 시작하게 되었다.
그리고 느낀점은 글로 css를 백날 공부해봐야 소용없나... 1시간 동안 직접 무언가를 만들어보는 것이 훨씬 도움된다...
css는 어느정도 할줄 안다고 생각했는데 나의 무력함을 느끼고야 말았다...
property: 속성
value: 속성값
css와 html을 연결시키는 방법 : linline / link / embedding 이 있다.
reset css
모든 웹 브라우저는 디폴트 스타일(브라우저가 내장하고 있는 기본 스타일)을 가지고 있어 CSS가 없어도 작동한다. 그런데 웹브라우저에 따라 디폴트 스타일이 상이하고 지원하는 tag나 style도 제각각이어서 주의가 필요하다.
Reset CSS는 기본적인 HTML 요소의 CSS를 초기화하는 용도로 사용한다. 즉, 브라우저 별로 제각각인 디폴트 스타일을 하나의 스타일로 통일시켜 주는 역할을 한다.
선택자 selector
클래스 선택자 이용방법 그림4
클래스로 미리 스타일을 지정후, 공백으로 구분시. 재사용 측면에서 유용하다.
셀렉터[어트리뷰트=”값”] : 지정된 어트리뷰트를 가지며 지정된 값과 어트리뷰트의 값이 일치하는 모든 요소를 선택한다.
셀렉터[어트리뷰트~=”값”]: 지정된 어트리뷰트의 값이 지정된 값을 (공백으로 분리된) 단어로 포함하는 요소를 선택한다.
셀렉터[어트리뷰트|=”값”]: 지정된 어트리뷰트의 값과 일치하거나 지정 어트리뷰트 값 뒤 연이은 하이픈(“값-“)으로 시작하는 요소를 선택한다.
셀렉터[어트리뷰트^=”값”]: 지정된 어트리뷰트 값으로 시작하는 요소를 선택한다.
셀렉터[어트리뷰트$=”값”]: 지정된 어트리뷰트 값으로 끝나는 요소를 선택한다.
셀렉터[어트리뷰트*=”값”]: 지정된 어트리뷰트 값을 포함하는 요소를 선택한다.
셀렉터 a 셀렉터 b : div 요소의 후손요소 중 p 요소 ex) div p { color: red; }
셀렉터A > 셀렉터B: div 요소의 자식요소 중 p 요소
가상클래스 셀렉터 : 요소의 특정 상태에 따라 스타일을 정의할 때 사용된다. 특정 상태란 예를 들어 다음과 같다.
ex) a:hover { color: red; }
부정셀렉터 : input:not([type=password]){} (패스워드가 아닌 모든요소 선택)
프로퍼티
크기 : 표적인 크기 단위는 px, em, %이다.
px은 절대값이고 em, %는 상대값이다.
대부분 브라우저의 폰트 사이즈 기본값은 16px, 1em, 100%이다. 프로퍼티 값이 0인 경우, 단위를 생략할 수 있다.
Viewport 단위(vh, vw, vmin, vmax) : 반응형 웹디자인은 화면의 크기에 동적으로 대응하기 위해 % 단위를 자주 사용한다. 하지만 % 단위는 em과 같이 상속에 의해 부모 요소에 상대적 영향을 받는다.
색상: W3C css3-color참고, HTML COLOR CODES참고
box 모델: content , padding, border, margin 으로 구성된다.
padding: 테두리(Border) 안쪽에 위치하는 요소의 내부 여백 영역이다. padding 프로퍼티 값은 패딩 영역의 두께를 의미하며 기본색은 투명(transparent)이다. 요소에 적용된 배경의 컬러, 이미지는 패딩 영역까지 적용된다.
margin: 테두리(Border) 바깥에 위치하는 요소의 외부 여백 영역이다. margin 프로퍼티 값은 마진 영역의 두께를 의미한다. 기본적으로 투명(transparent)하며 배경색을 지정할 수 없다.
text
text align : 텍스트의 수평정렬
ex)Reference a 요소에 대한 중앙 정렬은 적용되지 않았다. 이는 a 요소는 inline 요소이기 때문이다. inline 요소는 width 프로퍼티가 없으므로 중앙 개념이 존재하지 않는다. a 요소에 display: block;을 지정한다면 중앙 정렬이 가능할 것이다.
white-space: white space는 공백(space), 들여쓰기(tab), 줄바꿈(line break)을 의미한다. html은 기본적으로 연속된 공백(space), 들여쓰기(tab)는 1번만 실행되며 줄바꿈(line break)은 무시된다.
또한 텍스트는 부모의 가로 영역을 벗어나지 않고 자동 줄바꿈(wrap)된다. white-space 프로퍼티는 이러한 기본 동작을 제어하기 위한 프로퍼티이다.
position
static vs relative : static은 기본. relative는 static 위치에서 좌표설정이 가능하다(top, bottom, left, right) 차이는 그뿐.
relative vs absolute(절대위치):
relative 프로퍼티는 기본 위치(static으로 지정되었을 때의 위치)를 기준으로 좌표 프로퍼티(top, bottom, left, right)을 사용하여 위치를 이동시킨다. 따라서 무조건 부모를 기준으로 위치하게 된다.
absolute 는 부모 요소 또는 가장 가까이 있는 조상 요소(static 제외)를 기준으로 좌표 프로퍼티(top, bottom, left, right)만큼 이동한다. 즉, relative, absolute, fixed 프로퍼티가 선언되어 있는 부모 또는 조상 요소를 기준으로 위치가 결정된다.
따라서 부모 요소를 배치의 기준으로 삼기 위해서는 부모 요소에 relative를 정의하여야 한다.
fiexed(고정위치):
부모 요소와 관계없이 브라우저의 viewport를 기준으로 좌표프로퍼티(top, bottom, left, right)을 사용하여 위치를 이동시킨다.
스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치한다.
fixed 프로퍼티 선언 시, block 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width를 지정하여야 한다.
overflow:
overflow 프로퍼티는 자식 요소가 부모 요소의 영역를 벗어났을 때 처리 방법을 정의한다.
float
정렬: float 프로퍼티를 사용하지 않은 블록 요소들은 수직으로 정렬된다. float:left; 프로퍼티를 사용하면 왼쪽부터 가로 정렬되고, float:right; 프로퍼티를 사용하면 오른쪽부터 가로 정렬된다.
상속 : 프로퍼티 중에 상속이 되지 않는 것도 있다.
