BoostCource/Front-end

[FE] 01. HTML & CSS (1)

칸타탓 2018. 5. 18. 16:10

<1. 웹 프로그래밍 기초>

 

 

* HTML Tag의 종류

 

[참고] https://www.w3schools.com/tags/default.asp 

 

  • 링크, 이미지, 목록, 제목

  • anchor, img, ul/li, p, div 등이 자주 사용된다.

  • div: block 엘리먼트, 일반적인 영역(더미 영역)을 표현할 때 가장 많이 사용
  • ul, li: list를 나타낼 때
  • a href: 링크 추가
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div>
    <h1>반갑습니다</h1>
    여기 여러분들이 좋아하는 과일이 있어요.
    <ul>
      <li><a href="http://www.apple.com">사과</a></li>
      <li>사과</li>
      <li>메론</li>
      <li>귤</li>
    </ul>
  </div>
</body>
</html>

 

 

* HTML layout Tag

[참고] https://www.w3schools.com/tags/tag_header.asp

 

레이아웃: HTML 화면을 구성하는 기본적인 모습들

  • header: div와 같은 역할

  • section: 영역을 분리

  • nav: 네비게이션 (카테고리처럼 사용)

  • footer: html5 부터 적용, div와 같은 역할

  • section

  • article

  • aside: nav와 비슷하게 사용(사이드 쪽에서 추가적인 기능을 넣을 때)

 

PC에서는 버전 호환 문제로 header, footer 태그를 많이 사용하진 않지만 (대신 div 태그 사용), 모바일 에서는 많이 사용한다.

위와 같이 google 개발자 도구의 Elements 탭을 통해 HTML, CSS 확인 가능하다.

 

 

 

* HTML 구조 설계
이미 디자인 된 화면을 보면서 구조를 분석하며 그대로 구현해 내는 것, 이때 적절한 태그를 사용하는 것이 HTML의 구조화 설계이다.
 
A generalized diagram of a a typical web page, with major elements labelled.

 

* class와 id 설정
 
- id

  • 고유한 속성으로 한 HTML 문서에 하나만 사용 가능 (고유한 값, 하나밖에 없는 ui일 시에 사용)

  • 고유한 ID 값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색에 용이

- class

  • 하나의 HTML문서 안에 중복해서 사용 가능 (여러개 가능, 하나만 있어도 가능)

  • 하나의 태그에 여러 개의 다른 class 이름을 공백을 기준으로 나열 가능

  • 홈페이지 전체적인 스타일을 일관성 있게 지정하기 위해서는 class의 사용이 필수 (CSS 사용 시 동일한 스타일을 부여할 수 있기 때문에)

 

  • class 이름 규칙
[참고] https://blog.sonim1.com/221
  • 하이픈 사용
    • redBox(x) -> red-box(o)
  • BEM (Block Elements Modifiers) 네이밍 규칙 사용
    • stick-man__head--small(o)
  • 구성요소:__, 수식어:--
 

 

* CSS 사용하기

 

- CSS의 구성
span {
  color : red;
}

  • span : selector(선택자)

  • color : property

  • red : value

 

- style을 HTML페이지에 적용하는 3가지 방법

 

1. inline (style로 적용)

HTML태그 안에다가 적용, 다른 CSS파일에 적용한 것 보다 가장 먼저 적용(우선순위 가장 높음)

- 구조와 스타일이 섞여있으므로 유지보수, 관리가 어려워져 좋은 방법은 아니다.

<p style="border:1px solid gray;color:red;font-size:2em;">​

 

 2. internal

style 태그로 지정, head아래에 넣는다.

구조와 스타일이 섞이게 되므로 유지보수가 어렵다. (스타일이 적을 경우 사용)

별도의 CSS파일을 관리하지 않아도 되며 서버에 CSS파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없다는 장점이 존재한다.

<head>
<style>
p {
  font-size : 2em;
  border:1px solid gray;
  color: red;
}
</style>
</head>

<body>
<div>...</div>
</body>

 

 3. external

외부파일(.css)로 지정하는 방식

CSS 코드가 아주 짧지 않다면 가급적 이 방법으로 구현하는 것이 가장 좋다.

현업에서는 여러개의 CSS 파일로 분리하고 이를 합쳐서 서비스에서 사용하기도 한다.

internal 코드와 같은 css코드를 구현하고, style.css와 같은 별도 파일로 만든다.

이후에 아래처럼 link태그로 추가하면 된다.

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
      <div>
          <p>
              <ul>
                  <li></li>
                  <li></li>
              </ul>
          </p>
      </div>
  </body>
</html>

  

4. 우선순위 

inline은 별도의 우선순위를 갖지만, internal 과 external은 우선순위가 동등함.

따라서 겹치는 선언이 있을 경우 나중에 선언된 속성이 반영된다.

 

 

* CSS 상속과 선택자 우선순위

 

- 상속

상위(부모)에서 설정한 스타일을 하위(자식)에서 그대로 사용할 수 있다.

이로 인해 여러 단계로 중첩된 엘리먼트마다 매번 같은 색상과 글자 크기를 부여하지 않아도 되지만(재사용 측면에선 좋지만), 모든 CSS 속성이 이런 특징을 갖게 되면 문제가 생길 수 있다.

이로 인해 발생하는 문제점을 해결하기 위해 box-model이라고 불리는 속성들(width, height, margin, padding, border)과 같이 크기와 배치 관련된 속성들은 하위엘리먼트로 상속이 되지 않는다.

 

- 우선순위

동일하면 나중의 것이 적용된다. 더 구체적으로 표현된 것이 있다면 그것이 적용된다.

ex) body > span (적용 O), span (적용 X)

id > class > 엘리먼트 순으로 우선순위를 가진다. 따라서 셋이 함께 있다면 id인 것의 스타일이 적용된다. CSS의 이런 성질을 캐스캐이딩이라고 한다.

 

 

[참고] https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

[참고] https://gist.github.com/smutnyleszek/809a69dd05e1d5f12d01

 

* CSS selector

HTML의 요소를 tag, id, html 태그 속성 등을 통해 쉽게 찾아주는 방법이다.

 

- element에 style 지정을 위한 3가지 기본 선택자

  • tag로 지정하기

<style>
     span {
       color : red;
     }
 </style>

 

  • id로 지정하기 (#)

<style>
     #spantag {
       color : red;
     }
</style>

<body>
     <span id="spantag"> HELLO World! </span>
</body>

 

  • class로 지정하기 (.)

<style>
     .spanClass {
     color : red
     }
</style>

<body>
     <span class="spanClass"> HELLO World! </span>
</body>
 

  • 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 : 모든 자식의 순서에서 찾음

  • nth-of-type: 해당하는 자식 태그 요소에서의 순서를 찾음

  • 두 개의 차이점

<div>

  <li> abc </li>
   <p> def </p>
   <li> ghi </li>
</div>


div > li : nth-of-type(2) 는  div 안에서 li의 두 번째 것을 찾아서 거기에 맞는 css 를 적용해 주는 것
div > li : nth-child(2) 는 div 안 자식들 중에 두 번째를 찾는 것인데 두번째가 p 태그이므로 css 적용이 되지 않음 

(만약 적용하고 싶다면 3으로 바꿔주면 된다.)

 

 

* CSS 기본 스타일 변경하기

 

 

- font 색상 변경

  • color : red;

  • color : rgba(255, 0, 0, 0.5); //RGB 사용

  • color : #ff0000;   //16진수 표기법으로 가장 많이 사용되는 방법 (#f00도 동일하게 적용)

 

- font 사이즈 변경

  • font-size : 16px; //픽셀

  • font-size : 1em; //기준값에 대해서 상대적인 크기를 배수로 지정 가능 => 만약 16픽셀이 기본값이라면 2em으로 설정하면 32픽셀이 적용된다.

 

- 배경색 변경

  • background-color : #ff0;

  • background-image, position, repeat 등의 속성이 있다.

  • background : #0000ff url(“.../gif”) no-repeat center top; //이렇게 한 줄로도 정의 가능

 

- 글씨체, 글꼴 변경

  • font-family:"Gulim";

  • font-family : monospace;

 

저작자표시 비영리 변경금지

'BoostCource > Front-end' 카테고리의 다른 글

[FE] 03. JavaScript 배열, 객체  (0) 2018.07.19
[FE] 02. WEB UI 개발  (0) 2018.07.12
[FE] 02. JavaScript 기초  (0) 2018.07.12
[FE] 01. HTML & CSS (2)  (0) 2018.05.19
[FE] 01. HTML 기본  (0) 2018.04.12

'BoostCource/Front-end'의 다른글

  • 현재글[FE] 01. HTML & CSS (1)
댓글

티스토리툴바