작성한 부스트코스 후기입니다.
여러분들의 성원에 더 노력하는 부스트코스가 되겠습니다.
감사합니다.
******************************************
안녕하세요 Booster 2기 이슬기입니다!
오늘은 웹의 스타일을 정할 수 있는 css에 대해서 배워보도록 하겠습니다.
더욱 자세한 강의는 아래 링크에서 무료로 수강하실 수 있습니다:)
- 부스트코스
www.edwith.org
CSS 선언방법
- 선택자와 property, value로 구성된다.
span {
__ color : red;
}
· span : selector(선택자)
· color : property
· red : value
style을 HTML페이지에 적용하는 세 가지 방법
· inline
· internal
· external
*But, inline방식을 선호하지는 않는다.
구조를 표현하는 HTML 안에 style을 표현하는 CSS가 들어있으니까 구조와 스타일이 섞여있으므로, 유지보수 어렵고 관리 어렵다.
1. inline
HTML 태그 안에다가 적용합니다.
다른 CSS 파일에 적용한 것 보다 가장 먼저 적용합니다.
2. internal
style 태그로 지정합니다.
구조와 스타일이 섞이게 되므로 유지보수가 어렵습니다.
별도의 CSS파일을 관리하지 않아도 되며 서버에 CSS파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없습니다.
3. external
외부파일(.css)로 지정하는 방식입니다.
CSS 코드가 아주 짧지 않다면 가급적 이 방법으로 구현하는 것이 가장 좋습니다.
internal 코드와 같은 css코드를 구현하고, style.css와 같은 별도 파일로 만듭니다.
이후에 아래처럼 link태그로 추가하면 됩니다.
4. 우선순위
inline > internal == external
상속과 우선순위 결정
상위에서 적용한 스타일은 하위에도 반영된다.
따라서 여러 단계로 중첩된 엘리먼트마다 매번 같은 색상과 글자 크기를 부여하지 않아도 된다.
* But, box-model이라고 불리는 속성들(width, height, margin, padding, border)과 같이 크기와 배치 관련된 속성들은 하위엘리먼트로 상속되지 않는다.
「internal과 external은 같은 우선순위를 가진다?」
다음과 같이 style 태그에선(internal 방식) color를 red로 주고, css.css 파일에선 color를 blue로 준다면
더 나중에 선언된 external 방식의 css 내용이 반영된다. 즉, blue색깔로 나오게 된다!
따라서, internal과 external은 같은 우선순위로 결정된다고 할 수 있다.
* 일반적인 CSS위치는 css파일(external)에 두고 그 아래 style태그를 사용해서(internal 방식) 표현하므로 그런 경우는 internal > external
위와 같은 경우에는 id > Class > Element 순으로 우선순위를 가진다.
=> 위 코드에서는 id인 a의 색상이 적용되게 된다.(이런 성질은 "cascading"이라고 한다.)
선언방식에 따른 차이
같은 선택자(selector)라면 나중에 선언한 것이 반영되고,
선택자의 표현이 구체적인 것이 있다면 먼저 적용된다.
· body > span (O)
· span (X)
동일 우선순위면 더 나중에 선언한 것!
그리고, 더 구체적인 것!
CSS의 기본 스타일 변경하기
font 색상 변경
color : red;
color : rgba(255, 0, 0, 0.5);
color : #ff0000; //16진수 표기법으로 가장 많이 사용되는 방법
font 사이즈 변경
font-size : 16px;
font-size : 1em;
배경색
background-color : #ff0;
background-image, position, repeat 등의 속성이 있습니다.
background : #0000ff url(“.../gif”) no-repeat center top; //한 줄로 정의도 가능
글씨체/글꼴
font-family:"Gulim";
font-family : monospace;
* ,(comma)로 구분지어 쭉 나열해서 쓰면 적용되는 폰트가 나올때까지 다음 폰트로 넘어가게 된다.
엘리먼트가 배치되는 방식
엘리먼트를 화면에 배치하는 것을 layout 작업이라고도 하고 Rendering 과정이라고도 한다.(편의상 '배치'라고 부르겠다.)
기본 엘리먼트는 위에서 아래로 배치되는데, 웹사이트의 배치는 다양한 표현이 가능해야 하므로, 다양한 속성을 활용해야 한다.
엘리먼트가 배치되는 방식 (display:block)
display속성이 block이거나 inline-block인 경우 그 엘리먼트는 벽돌을 쌓든 블록을 가지고 쌓입니다.
엘리먼트가 배치되는 방식 (display:inline)
display 속성이 inline인 경우는 우측으로, 그리고 아래쪽으로 빈자리를 차지하며 흐릅니다.
높이와 넓이를 지정해도 반영이 되지 않습니다.
엘리먼트가 배치되는 방식 (position:static, relative, absolute)
엘리먼트 배치가 순서대로만 위아래로 또는 좌우로 흐르면서 쌓이기만 하면, 다양한 배치를 하기 어렵습니다.
position 속성을 사용하면 상대적/절대적으로 어떤 위치에 엘리먼트를 배치하는 것이 수월합니다.
1. position 속성으로 특별한 배치를 할 수 있습니다.
position 속성은 기본 static입니다.
그냥 순서대로 배치됩니다.
2. absolute는 기준점에 따라서 특별한 위치에 위치합니다.
top / left / right / bottom 으로 설정합니다.
기준점을 상위엘리먼트로 단계적으로 찾아가는데 static이 아닌 position이 기준점입니다.
3. relative는 원래 자신이 위치해야 할 곳을 기준으로 이동합니다.
top / left / right / bottom로 설정합니다.
4 fixed는 viewport(전체화면) 좌측, 맨 위를 기준으로 동작합니다.
지금까지 CSS의 기본 개념에 대해서 알아봤는데요,
더욱 자세한 내용은 위에 링크를 참고하시면 좋을 것 같습니다!
[출처] [부스트코스](웹 프로그래밍)Front End_CSS|작성자 뿌힁뿌힁
******************************************