TLI 4 | Thank you

저는 제가 쓰는 블로그를 통해서 제가 전달하고자 하는 정보를 필요로 하신 사람들의 needs를 충족시키고 해결드리기를 바란다.

개발을 시작하고 두번째로 마주하게 된 언어 "CSS"는 무엇일까?

What CSS ?

CSS 는 Cascading Style Sheets 약어이다.
HTML이 사람에 비유해서 '뼈' 정도로 생각할 수 있다면,
CSS는 살 정도로 생각 할 수 있다 사람이 살이 없이 뼈만 있다고 생각해보자 얼마나 징그러울지 우리가 사용하는 웹도 그렇다
CSS 없는 웹 문서는 보기에 좋지 않다
그래서 CSS는 HTML문서를 꾸밀 때 사용하는 스타일 시트 언어이다.

CSS 적용방법

외부 스타일 시트 적용하기.
: html 태그에 link 태그를 통해 연결ㅂ

<head><link rel="stylesheet" type="text/css" href="../css/basic.css">
</head>

내부 스타일 시트 적용

<head>
	<style type="text/css">
    h1 { color : red};
    </style>
</head>

인라인 스타일 적용

<body>
	<h1 style="color : red;">inline style</h1>
</body>

우선선위 :
브라우저 디자인 정의 -> 외부 스타일시트 -> 내부 스타일시트 -> 인라인 스타일시트

CSS 선택자

전체 선택자
: 모든 요소를 선택한다.

*{background : black}

class 선택자
: 주어진 class 특성을 가진 모든 요소를 선택합니다.

.one{
 height :50px;
  width 50px;
  background : red;
}

tag 선택자
: 선택한 tag를 지정하여 스타일이 적용됩니다.

div{
   height :50px;
    width 50px;
    background:blue;
}

id 선택자
: 선택한 id를 지정하여 스타일이 적용됩니다.

  #two{
    height :50px;
    width 50px;
    background:blue;
  }

CSS 기본문법

선택자는 보통 스타일링 하고 싶은 HTML 요소나 부여한 idㅎ 혹은 class 가 위치합니다.
선언부에 여러개의 속성과 속성값이 있을때는 ;(세미클론)으로 구분합니다.
각각의 선언은 속성과 속성값을 :(콜론)으로 구분합니다.

글자모양

font-weight : 글 두께  -> (ex) font-weigh : bold;
font-style : 글 스타일  -> (ex) font-style: italic;
font-size : 글 크기 -> (ex) font-size : 18px;
line-weight : 줄 높이  -> (ex) line-height;

문단

color : 글 색깔
text-align : 글 좌우 정렬 * left, center, right, justify
vertical-align : 글 상하 정렬 * top, middle, bottom
text-decoration : 윗줄 * overline, line-through, underline, none

배경

background: 배경색
background-image : 배경이미지 * url

박스모델

css 를 구성하는 기본이 되는 개념이다, 설계작 역할을 한다.

-> 실제 우리가 보는 웹사이트 분석시 복잡한 레이아웃으로 보일 수 있지만 사실은 사각형의 집합으로 이루어져있다.
-> 부모자식 관계를 가진다, 사각형이 겹겹이 층을 쌓아 구성되어있다.
-> 이미지가 동그라미일 수는 있지만 브라우저가 크기를 계산할 때는 박스 기준으로 계산된다.

* content : 콘텐츠가 표시되는 영역.
진짜 내용을 담고 있는 핵심 영역이다.
width, height 로 크기 지정이 가능하다.

* padding : 콘텐츠와 테두리(border) 사이의 여백.

* border : padding 과 margin 사이의 테두리.
디폴트값은 0으로, 존재는 하지만 눈에 보이지 않는다.

* margin : 가장 바깥 쪽 레이어.
콘텐츠와 패딩, 테두리를 둘러싸면서 다른 요소 사이 공백 역할을 한다.

1. margin

요소의 네 방향 바깥 여백 영역을 설정한다.
margin-top, margin-right, margin-bottom, margin-left 의 단축 속성이다.
디폴트값은 상하좌우 모두 0 이다.
자식에게 상속되지 않는다.
절대길이와 상대길이 모두 사용 가능하다.
한 개의 값 = 모든 네 면의 여백
두 개의 값 = 상&하, 좌&우
세 개의 값 = 상, 좌&우, 하
네 개의 값 = 상, 우, 하, 좌 (시계방향) 순서로 지정한다.

#two{
   width: 100px;
  height: 100px;

  margin-top: 30px;

  background-color: cadetblue;
}

.three {
  width: 30px;
  height: 30px;

  margin-top: 40px;

  background-color: indianred;
}

2. padding

요소의 네 방향 안쪽 여백 영역을 설정한다.
padding-top, padding-right, padding-bottom, padding-left 의 단축 속성이다.

   width: 100px;
   height: 100px;
   padding-top : 50px;;
   background-color: cadetblue;
}

.three {
   width: 100px;
   height: 100px;
   padding : 50px;  
   background-color: indianred;
}

3. border

3-1. border-style : 요소 테두리 네 면의 스타일을 지정한다.
기본값은 none 이다.
--> none 일 경우에는 선의 굵기와 색을 지정해줘도 보이지 않게 된다.
solid, dotted, dashed, ... 등 많은 키워드 값이 있다.

3-2. border-width : 요소 네 면 테두리의 굵기를 설정한다.
thin, medium, thick 세 가지 키워드를 갖고 있다.

3-3. border-color : 모든 면의 테두리 색상을 설정한다.

3-4. border (단축 속성) : border : 요소의 테두리를 설정한다.
border-style, border-width, border-color 의 값을 설정한다.
스타일을 지정하지 않으면 none 이 되기 때문에 스타일은 필수로 지정하자.
속성의 순서는 상관없다.

3-4.border-radius : 요소 테두리 경계의 꼭짓점을 둥글게 만든다.

css 레이아웃

1. position

속성은 태그를 어떻게 위치시킬지를 정의하며, 아래의 5가지 값을 갖습니다.

static: 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없습니다.
relative: 원래 있던 위치를 기준으로 좌표를 지정합니다.
absolute: 절대 좌표와 함께 위치를 지정해 줄 수 있습니다.
fixed: 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정합니다.
inherit: 부모 태그의 속성값을 상속받습니다.

1-1. static
position 을 아무것도 지정하지 않으면 사용되는 기본 값입니다. position 속성을 static 으로 지정하면 위치가 지정된 것이 아니라 그냥 HTML 문서에 따라 위치가 정해졌다고 보면 됩니다. 기본 값이기 때문에 보통의 경우 잘 쓰이지 않는 값입니다.

div.static { position: static; }

1-2. relative
position 을 relative 로 지정하면 해당 요소가 기본적으로 표시된 위치를 기준으로 새로운 위치를 지정 할 수 있습니다.
이 말을 다른 말로 하면 position 을 relative 로 지정하더라도 top 이나 left 등으로 새로운 위치를 지정하지 않는 이상 기본적으로 표시된 위치와 다르지 않음을 이야기 하는 것입니다.

div.relative {
    position:   relative;
    left:       100px;
    top:        -100px;
}

1-3. absolute
position 을 absolute 로 지정하는 것은 fixed 와 비슷하지만 다릅니다.
무슨 말인고 하니 fixed 는 사용자의 브라우저를 기준으로 위치를 고정시키는 것이지만, absolute 는 해당 요소의 위치가 지정된 부모 요소를 기준으로해서 fixed 시키는 것과 같다고 생각하면 됩니다.

위치가 지정된 부모요소라는 것은 결국 position 속성이 static 이 아닌 다른 값으로 지정 되어야 함을 의미합니다.

div.parent { 
    position:   relative;
}
div.child { 
    position:   absolute;
    top:        0;
    left:       0;
    width:      100%;
    height:     100%;
}

위 예제의 경우 parent 라는 클래스의 자식 요소인 child 클래스 요소는 parent 와 같은 위치에 같은 크기로 표시 됩니다. 두 div 요소를 겹쳐 놓은 것과 마찬가지입니다.

만약 parent 클래스의 요소의 position 을 fixed 로 지정했다면 child 클래스 요소도 parent 와 마찬가지로 화면을 스크롤해도 항상 같은 위치에서 사용자에게 보여질 것입니다.

1-4. fixed
position 을 fixed 로 지정하면 해당 요소의 위치를 사용자의 브라우저를 기준으로 설정할 수 있습니다. 스크롤을 내려도 항상 같은 곳에 위치하는 상단바, 하단바, 광고 등이 이 속성을 이용하는 것입니다.

이를 위해서는 top, bottom, left, right 등으로 위치를 지정하고 width 와 height 로 요소의 크기를 지정할 수 있습니다.

예를 들어 스크롤을 내려도 하단에 항상 고정되어 있는 하단바를 만들기 위해서는 아래와 같이 position 속성을 사용할 수 있습니다.

div.footer-bar { 
    position:   fixed;
    left:       0;
    bottom:     0;
    width:      100%;
    height:     32px;
}

2. display 속성

display 속성은 요소를 어떻게 보여줄지를 결정합니다 주로 4가지 속성값이 쓰이는데, 태그마다 기본값이 다릅니다.

none : 보이지 않음
block : 블록 박스
inline : 인라인 박스
inline-block : block과 inline의 중간 형태

2-1. block

기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보입니다. 이는 word 같은 문서에서 문단을 표시할 때, 한 문단이 끝난 뒤에 나타나는 요소는 항상 다음 줄에 표시되던 것과 비슷한 맥락입니다.
width, height 속성을 지정 할 수 있으며, block 요소 뒤에 등장하는 태그가 그 이전 block 요소에 오른쪽에 배치될 수 있어도 항상 다음 줄에 렌더링됩니다.

block 요소

<address>, <article>, <aside>, <blockgquote>, <canvas>, <dd>, <div>, <dl>, <hr>, <header>, <form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <pre>, <ul>, <p>, <ol>, <video>

block 요소들은 위와 같은 요소들이 있으며 위에 나열된 태그들 말고도 많은 태그들이 있습니다.

2-2. inline

block 과 달리 줄 바꿈이 되지 않고, width와 height를 지정 할 수 없습니다. word 같은 문서에서 볼드, 이탤릭, 색상, 밑줄 등 글자나 문장에 효과를 주기 위해 존재하는 단위라고 할 수 있습니다. 문서에서 특정 부분에 색상을 입힌다고 다음에 나오는 글이 줄바꿈 되지 않듯이 inline 요소 뒤에 나오는 태그 또한 줄바꿈 되지 않고 바로 오른쪽에 표시됩니다.

inline 요소

<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite>

inline 요소들은 위와 같은 요소들이 있으며 위에 나열된 태그들 말고도 많은 태그들이 있습니다.

2-3. inline-block
block과 inline의 중간 형태라고 볼 수 있는데, 줄 바꿈이 되지 않지만 크기를 지정 할 수 있습니다.

Author And Source

이 문제에 관하여(TLI 4 | Thank you - "CSS"), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hyeongjoon/TLI-4-Thank-you-CSS

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

TLI 4 | Thank you - "CSS"