1. 웹 프로그래밍 기초 - 3. CSS - FE

1. 웹 프로그래밍 기초

3. CSS - FE

1) CSS 선언방법

• CSS 구성: selector { property: value; }
• 적용 방법
  • inline: HTML 태그 안에 적용. 다른 CSS 파일에 적용한 것보다 가장 먼저 적용
  • internal: head안에 style 태그로 지정. 유지보수 어렵. 별도의 CSS 파일 관리하지 않아도 되며 서버에 CSS 파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없음.
  • external: 외부파일로 지정. 가급적 이 방법으로 구현하는 것이 가장 좋음.

  <link rel="stylesheet" href="style.css">

internal과 external은 우선순위 동일 -> 나중에 선언된 속성 반영

2) 상속과 우선순위 결정

• 상위에서 적용한 스타일이 하위에도 반영된다. (색상, 글자 크기 등)
• box-model이라고 불리는 속성들(width, height, margin, padding, border)처럼 크기, 배치와 관련된 속성들은 상속이 되지 않는다.
• 선택자 우선순위 - cascading 경쟁
  • 구체적인 것이 있다면 그것이 먼저 적용된다.
  • 같은 선택자라면 나중에 선언한 것이 반영된다.
  • id(100점) > class(10점) > element(1점)

3) CSS Selector

<span id="spantag" class="spanClass">text</span>

• tag로 지정하기

span { color: red; }

• id로 지정하기

#spantag { color: red; }

• class로 지정하기

.spanClass { color: red; }

• id, class 요소 선택자와 함께 활용

#myid { color : red }
div.myclassname { color : red }

• 그룹 선택 (여러 개 셀렉터에 같은 style을 적용해야 한다면)

h1, span, div { color : red }
h1, span, div#id { color : red }
h1.span, div.classname { color : red }

• 요소 선택 (공백) : 자손요소
• 아래 모든 span태그에 red색상이 적용됨

<div id="jisu">
  <div>
    <span> span tag </span>
  </div>
  <span> span tag 2 </span>
</div>

#jisu span { color : red }

• 자식 선택 (>) : 자식은 바로 하위엘리먼트를 가리킵니다.
• 아래는 span tag 2만 red 색상이 적용됩니다.

<div id="jisu">
  <div>
    <span> span tag </span>
  </div>
  <span> span tag 2 </span>
</div>

#jisu > span { color : red }

• n번째 자식요소를 선택합니다. (nth-child)
• 첫번째 단락에 red 색상이 적용됩니다.

<div id="jisu">
  <h2>단락 선택</h2>
  <p>첫번째 단락입니다</p>
  <p>두번째 단락입니다</p>
  <p>세번째 단락입니다</p>
  <p>네번째 단락입니다</p>
</div>

#jisu > p:nth-child(2) { color : red }

• 부모요소 > nth-child(n) : 부모 태그 안의 모든 요소 중 n번째 요소 선택
  부모요소 > nth-of-type(n) : 부모 태그 안의 A라는 요소 중 n번째 요소 선택

4) CSS 기본 Style 변경하기

• font 색상 변경
  • color : red;
  • color : rgba(255, 0, 0, 0.5);
  • color : #ff0000; //16진수 표기법, 가장 많이 사용되는 방법
• font 사이즈 변경
  • font-size : 16px;
  • font-size : 1em; //기본 픽셀을 기준으로 1배, 기본 픽셀은 상속받는 것에 따라 달라질 수 있음.
• 배경색
  • background-color : #ff0;
  • background-image, position, repeat 등의 속성이 있음.
  • background : #0000ff url(“.../gif”) no-repeat center top; //한 줄로 정의도 가능
• 글씨체, 글꼴
  • font-family:"Gulim";
  • font-family : monospace, sans-serif; //브라우저에서 앞의 폰트가 지원되지 않을 경우 다음 폰트 사용.. 이렇게 나열 가능

5) Element가 배치되는 방법 (CSS Layout)

• display: block, inline, inline-block
  • block: 대부분의 엘리먼트, 위에서 아래로 쌓임
  • inline: 좌에서 우로, 가득차면 아래쪽으로 쌓임. 높이와 넓이를 지정해도 반영되지 않음.
• position: static, absolute, relative, fixed
  • static: position 속성의 기본. 순서대로 배치
  • absolute: 기준점에 따라서 top/left/right/bottom으로 설정하여 배치, 기준점은 상위 엘리먼트 중 static이 아닌 position
  • relative: 원래 자신이 위채해야 할 곳을 기준으로 top/left/right/bottom으로 설정하여 배치
  • fixed: 전체화면 좌측, 맨 위를 기준으로 동작. 스크롤을 해도 위치 변하지 않음.
• float: left, right
  • 원래 flow에서 벗어남. 뒤의 block 엘리먼트가 float 엘리먼트를 의식하지 못하고 중첩돼서 배치됨.
• margin과 padding 속성 이용하여 배치할 수도 있음 - box-model
• box-sizing: border-box; //padding을 줘도 엘리먼트의 크기가 변하지 않음.
• 전체 레이아웃은 float를 잘 사용해서 2단, 3단 컬럼 배치를 구현합니다.
  최근에는 css-grid나 flex 속성 등 layout을 위한 속성을 사용하기 시작했으며 브라우저 지원범위를 확인해서 사용하도록 합니다.
  특별한 위치에 배치하기 위해서는 position absolute를 사용하고, 기준점을 relative로 설정합니다.
  네비게이션과 같은 엘리먼트는 block 엘리먼트를 inline-block으로 변경해서 가로로 배치하기도 합니다.
  엘리먼트안의 텍스트의 간격과 다른 엘리먼트간의 간격은 padding과 margin 속성을 잘 활용해서 위치시킵니다.

6) float 기반 샘플 화면 레이아웃 구성

• float를 부모에게 자식으로 인식시키기 -> overflow: auto;
• float 다른 엘리먼트에 인식시키기 -> clear: both; (left, right)

7) 디버깅 - HTML - CSS

• 개발자 도구의 element 패널 이용 -> Style 탭과 Computed탭 용이