CSS?

= HTML tag에 디자인을 입혀주는 것

HTML과 CSS파일의 연결:

1. HTML document에 CSS파일 불러오기

<link href=“css파일경로” rel=“stylesheet” type=“text/css”>

  • rel: HTML file과 CSS file과의 관계를 설명

2. HTML에 CSS적용는 방법(in CSS):

~> Selector: CSS 적용대상

  1. 개별 적용 -tag=> 단순히 태그 이름만 기재 -class=> ‘.classname’ -id=> #idname

또는 <style> 태그를 활용해서 html문서 내에서 직접 적용하는 방법도 있지만. 나중에 문서를 수정하거나 CSS적용을 고려한다면 CSS요소는 CSS파일에서 따로 적용하는게 좋다.

  1. 모든 tag에 적용: ”*” selector

*{ box-sizing: border-box; }

  1. 동일한 스타일을 각기 다른 태그와 클래스 등에 적용할 경우 : 각자의 selector에 모두 똑같은 스타일을 적기보다는 한꺼번에 스타일을 지정=> ‘,’ 사용

.what-is-blockquote, span { color: green; }

  1. 엄청 길게도 작성할 수 있다… .a div .b .pre span { background-color: yellow; } => a class 안의 div tag안의 b class 안의 pre class안의 span에 배경색을 노랑으로,,
<div class="a">
  <div>
    <header class="b">
      <h1 class="pre">
        <span>제목! 노란색 배경 나옴!</span>
        <span class="title">이것도 나옴!</span>
      </h1>
      <span>이건 적용안 됨</span>
    </header>
  </div>
  <span>이건 적용안 됨</span>
</div>

CSS Specificity: Selector 우선순위 : 흔히 tag < class < id < inline 순으로 표현하지만, 실제로는 (a,b,c) 형태의 가중치 튜플로 비교한다. a = id 개수, b = class·속성·가상클래스 개수, c = 태그·가상요소 개수이며, a → b → c 순서로 자리별로 비교한다. (inline 스타일은 이보다 더 높은 우선순위) 따라서 낮은 등급을 아무리 많이 써도 높은 등급 하나를 항상 이기는 것은 아니다. 예를 들어 class를 여러 개 겹쳐도 id 하나(1,0,0)를 넘어서지 못한다. css거의 대부분의 요소에 class를 부여해주고, class를 selector로 styling해주기 때문에, 최대한 중복을 피할 수 있도록 작성합니다.

/+ 추가내용 <div> 태그는 만들고 나면 class나 id를 부여하여 각각의 스타일을 적용하게 된다. 그러나 id를 적용하면 우선순위가 아주 높다보니 다른 스타일 속성이 쉽게 무력화된다. 따라서 id를 범용하면 home, banner, nav a 와 같이 길고 복잡한 selector를 사용해야 하므로, id 대신 class를 더 자주 쓴다.

  1. 밑줄 긋는 방법 1.
  • text-decoration: overline;
  • text-decoration: underline;
  1. border 이용하기
  1. font-family:폰트 스타일 지정하는 속성

주의) “Times New Roman”만 ""(쌍따옴표)로 감싸져 있는데, 폰트 이름에 띄어쓰기가 되어있으면 ""(쌍따옴표)를 사용해야합니다. 사용자가 어떤 브라우저를 사용할지 모르기 때문에 font-family 값에는 보통 여러가지 폰트를 나열합니다.

  1. text-align: 글씨 정렬

다만 <span>은 inline-element이므로, “span의 오른쪽 정렬”이라는 text만큼 영역을 차지하고 있어 정렬이 되지 않는다.

  1. text-indent: css 들여쓰기
  2. blockquote : 인용구문을 넣을 때 쓰는 태그입니다. : 브라우저는 blockquote태그에 양쪽 여백을 넣는 기본 스타일을 자동으로 적용됨.

Q. 문장 사이사이에 스페이스를 추가하고 싶을 때? : 스페이스를 의미하는 &nbsp; 을 넣어주면 됩니당.

/+ 추가내용 CSS selector를 표기하는 방법중에

해당 태그의 첫 번째 순서인지,

마지막 순서인지,

홀수/짝수 인지 알 수 있는 selector 표기법!

 selector: first-child
 selector: last-child
 selector: nth-child(odd) //홀수
 selector: nth-child(even) //짝수

Layout의 모든것

layout의 핵심은 블록 레벨 요소들을 원하는 위치에 배열하는 것 웹사이트를 구성하는 요소들을 배치할 공간을 분할하고 정렬하는 것이다. 공간을 분할할 때는 먼저 행을 구분한 후, 행 내부 요소를 분리하는 것이 일반적이다.

1. Position

:: html 코드는 작성한 순서대로 페이지에 나타난다. 이때 CSS의 position property를 사용하면, html 코드와 상관없이 그리고 싶은 어느 위치에나 요소를 배치시킬 수 있다.

  • position: static; // 기본값. 위치를 지정하지 않음
  • position: relative;
  • position: absolute; // position이 static이 아닌 parent를 기준으로 고정
  • position: fixed; //해당 브라우저의 페이지를 기준으로 고정

2. inline과 inline-block, block

Block element vs. Inline element

  1. 의의

(1) Block element

-대부분의 HTML element(요소)는 block요소에 해당하는 태그들이다. ex. <header>, <footer>, <p>, <li>, <table>, <div>, <h1>등

-이 요소들은 ‘바로 옆(좌우측)에 다른 요소를 붙여 넣을 수 없다.‘는 뜻이다.

(2) Inline element ex. <span>, <a>, <img> -요소끼리 서로 한 줄에, 바로 옆에 위치 할 수 있다.

  1. display와 float

    Block 요소를 좌우로 나란히 배치하고 싶을 때 쓰는 CSS property로 display와 float가 있다.

.block {
  float: left;
}

.block {
  display: inline-block;
}

display: inline-block을 주면 요소가 옆에 배치되는 inline 성질을 갖게 된다. 다만 float은 조금 다르다. float을 준다고 해서 요소가 inline이 되는 것이 아니라, float된 요소의 computed display는 block으로 계산된다. float은 요소를 일반 흐름(normal flow)에서 꺼내 좌/우로 흐르게 하여 다른 콘텐츠가 그 옆으로 감싸지도록 만들 뿐이다.

반대로 원래의 inline성질을 block으로 바꾸게 할 수도 있다.

 .inline{
   display: block;
 }

display: none; 이라는 값을 주면, 해당 요소는 화면에서 보이지 않는다. 이는 JavaScript와 결합하여 큰그림을 그릴때 사용한다. 요소를 보이게/안보이게 하는 효과랄까

3. float

_페이지 전체의 레이아웃을 잡을 때에 정말 중요했던,,, 도구

  • float 속성: left, right, none 등

_float 속성을 가진 요소는 부모가 높이를 인지할 수 없어서 부모를 벗어난다. 이 문제를 해결하기 위해

clear property를 사용한다. <br class="clear">