스터디📖/웹 개발 기초

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

호프 2021. 3. 14. 03:46

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탭 용이
저작자표시 (새창열림)