티스토리 뷰

HTML, CSS

CSS - Front End (1)

JeongHyeon 2018. 5. 19. 01:49

1. CSS 선언방법

CSS의 구성

selector(선택자), property, value 로 구성

span { color : red; }

span : selector(선택자)
color : property
red : value

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

inline
internal
external

1) html 태그 안에다가 : inline

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8" />
    <title>World !</title>
</head>

<body>
    <span style = "color:red;"> HELLO world ! </span>
</body>
</html>

다른 CSS파일에 적용한 것 보다 가장 먼저 적용합니다.

2) style 태그로 지정하기 : internal

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8" />
    <title>World !</title>
    <style>
    span {
        colr : red;
    }
    </style>
</head>

<body>
    <span> HELLO world ! </span>
</body>
</html>

구조와 스타일이 섞이게 되므로 유지보수가 어렵습니다.
별도의 CSS파일을 관리하지 않아도 되며 서버에 CSS파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없습니다.

3) 외부파일(.css)로 지정하기 : external

/* main.css */
span {
    color : red;
}

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<title>World !</title>
<link rel=="stylesheet" type="text/css" href="main.css" />
</head>

<body>
    <span> HELLO world ! </span>
</body>
</html>

CSS 코드가 아주 짧지 않다면 가급적 이 방법으로 구현하는 것이 가장 좋습니다.
현업에서는 여러개의 CSS 파일로 분리하고 이를 합쳐서 서비스에서 사용하기도 합니다.
internal 코드와 같은 css코드를 구현하고, style.css와 같은 별도 파일로 만듭니다.

# 우선순위

inline은 별도의 우선순위를 갖지만, internal과 external은 우선순위가 동등합니다. 따라서 겹치는 선언이 있을 경우 나중에 선언된 속성이 반영됩니다.

2. 상속과 우선순위 결정

상속(inheritance)

CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다.
상속하는 속성은 자식 요소에 영항을 미칩니다.
상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다.

상속하는 속성

예를 들어 color 는 상속하는 속성입니다. 부모 요소에서 정한 색이 자식 요소에도 적용됩니다.

<style>
    p { color : blue; }
</style>
<p>Loerm <em>Ipsum</em></p>

위와 같은 경우에, Lorem 뿐만 아니라 Ipsum의 색도 파란색이 됩니다.

상속하지 않는 속성

예를 들어 padding 은 상속하지 않는 속성입니다. 부모 요소에서 padding 을 정의해도 자식 요소에 적용되지 않습니다.

<style>
    p { padding : 20px; }
</style>
<p>Lorem <em>Ipsum</em></p>

위와 같은 경우에 p 요소에만 안쪽 여백을 만들고 em 요소에는 안쪽 여백을 만들지 않습니다.

box-model이라고 불리는 속성들(width, height, margin, padding, border)과 같이 크기와 배치 관련된 속성들은 하위엘리먼트로 상속이 되지 않습니다.

강의 영상에서 우선순위는 inline > internal > external 라고 설명했습니다. 일반적인 CSS위치는 css파일(external)에 두고 그 아래 style태그를 사용해서(internal방식) 표현하기 때문에 그런경우 위에 나온 내용이 맞습니다.

하지만, internal과 external은 같은 우선순위를 가집니다.

<head>
<style>div {color:red;} </style>
<link rel="stylesheet" href="css.css">
</haed>

위와 같은 경우 만약, css.css에서 div color를 blue로 주었다면, 뒤에 선언된 external방식의 css내용이 반영됩니다. 따라서 blue색깔로 나올 것 입니다.

즉, internal과 external은 같은 우선순위로 결정된다고 아셔야 합니다.

캐스캐이딩(Cascading)

<div id="a" class="b" >
    text...
</div>

위 코드에서 id, class, 엘리먼트 순으로 우선순위를 가집니다.

id는 클ㄹ스보다 우선되고 클래스는 엘리먼트보다 우선됩니다.
위 코드에서는 id인 a의 색상이 적용되게 됩니다.
CSS의 이런 성질을 캐스캐이딩이라고 합니다.

선언방식에 따른 차이

같은 선택자(selector)라면 나중에 선언한 것이 반영됩니다.
선택자의 표현이 구체적인 것이 있다면 먼저 적용됩니다.

body > span (O)
span (X)

3. CSS Selector

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

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

tag로 지정하기

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

id로 지정하기

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

class로 지정하기

<style>
  .spanClass {
      color : red
  }
</style>
<body>
  <span class="spanClass"> HELLO World! </span>
</body>

CSS Selector의 다양한 활용

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 색상이 적용됨

#jisu span { color : red }

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

자식 선택 (>) : 자식은 바로 하위엘리먼트를 가리킵니다.

아래는 span tag 2만 red 색상이 적용됩니다.

#jisu > span { color : red }

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

n번째 자식요소를 선택합니다. (nth-child)

첫번째 단락에 red 색상이 적용됩니다.

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

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

# nth-child 와 nth-of-type의 차이점

E:nth-child(n)

앞으로부터 지정된 순서와 일치하는 요소가 E라면 선택합니다.
E 아닌 형제요소의 순서가 계산에 포함됩니다.

E:nth-of-type(n)

E 요소 중 앞으로부터 순서가 일치하는 E 요소를 선택합니다.
nth-child와 다르게 E요소의 순서만 계산합니다.

4. CSS 기본 Style 변경하기

CSS style 적용은 글자색, 배경색 등이 가장 자주 사용되는 것들입니다.
이런 속성은 위치 값과 크기를 지정하는 것과 달리, 색상 위주로 값을 부여합니다.
색상 관련 값은 다양한 색을 일관된 방법으로 표현하기 위해 주로 16진수 표기법을 사용합니다.

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;

출처

위의 내용은 부스트코스의 ‘Full-Stack Web Developer’ 과정을 공부한 내용입니다.

출처 : http://www.edwith.org/boostcourse-web/joinLectures/12952

저작자표시

'HTML, CSS' 카테고리의 다른 글

CSS - Front End (2) (0)	2018.05.19
HTML - Front End (0)	2018.05.16

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

글 보관함

천천히 하자