제발 제 코드에 훈수하세요

CSS속성

• 공간
• 위치
• 글자

위치

위치에 관한 속성은

• 배경 또는 공간의 위치에 관련된 속성들

• background, position, float, overflow

• 텍스트의 정렬, 위치에 관련된 속성들

• text-align, vertical-align, line-height, text-indent, overflow

이렇게 나눈 기준은 block, inline 요소이다.

보통 배경 또는 공간은 가지는 요소들은 block요소가 많다.

텍스트를 가지는 요소들은 inline요소가 많다.

inline요소가 공간을 가지도록 할 수도 있는데 display: block; 을 사용하는 것이다.

이는 inline요소를 block요소처럼 보이게 만들어 공간을 부여할 수 있다.

텍스트의 위치 속성은 다음 장에서 알아보도록 하고 이번에는 배경의 위치 속성을 알아보자

먼저 background(배경) 속성에 대해 알아보자

background

CSS에서 이것 빼면 시체라고 할 정도로 background속성은 정말 중요하다.

background와 관련된 많은 속성과 속성 값이 있다.

그중 색, 이미지, 이미지의 반복 여부, 위치, 위치의 고정여부에 대해서 알아보자

background-color: 배경 색에대한 속성이며 색 단위를 선택해 색을 넣으면 페이지에 나타난다.

background-image: 단위URL을 통해 이미지의 경로를 적어주면 이미지가 나타난다.

background-repeat: 페이지에 이미지의 반복 여부를 결정하는 속성이다.

background-position: 이미지의 위치를 설정하고 x축, y축 순의 방향으로 px이나 %를 이용한다.

background-attachment: 이미지의 위치를 고정, 스크롤, 로컬로 나타낼 수 있으며 

https://developer.mozilla.org/ko/docs/Web/CSS/background-attachment 

여기서 확인해 각각의 속성값을 확인해 볼 수 있다.

/*예시*/
body { 
/*각각 쓴 경우*/
    background-color: #262a25;
    background-image: url(images/banner2.png);
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: top; 
    background-position: 50% 0; /* 하나의 값이 생략될 경우 center로 적용 */
    background-attachment: fixed;
/*합쳐서 쓴 경우*/    
    background: #262a25 url(images/banner2.png) no-repeat 50%(가로) 0(세로) fixed;
}

배경 안의 이미지의 위치는 background-position으로 설정할 수 있다.

그렇다면 배경 자체의 위치는 어떻게 설정할까?

바로 position 속성이다.

position

가장 쉽게 공간의 위치를 설정할 수 있는 속성이다.

단순 구조 보다는 복잡한 레이아웃 구조를 위해 사용되고 있다. 

단, 모든 공간을 position으로 설정해 버린다면 페이지 수정 요청이 들어온다면 새로 만드는 것이 빠를지도 모른다.

position의 속성 값은 static(정적), relative(상대적), absolute(절대적), fixed(고정적)이 있다.

숫자에 -(마이너스)를 사용할 수 있으며 이는 '반대 방향으로 숫자만큼'의 의미이다.

static: 기본 값으로 위치가 지정되었다기보단 공간이 원래 가지고 있는 위치이다.

.static {
  position: static;
}

relative: 상대적으로 위치를 지정할 수 있으며, 이 말은 기준이 될 요소를 지정해야 한다는 뜻이다.

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  width: 500px;
}

relative1의 position:relative; 는 static과 동일하게 적용된다. ( 만일 relative2처럼 방향 값을 지정한다면 상황은 달라진다.)

중요한 것은 relative2의 속성들인데 position: relative; 를 적용 후 top, right, bottom, left를 사용하여 위치 값을 지정한다. 

relative는 원래 위치를 기준으로하여 방향 값을 적용하는 방법이다.

absolute: 절대적으로 위치를 지정할 수 있으며, 이 말은 기준이 될 요소가 정해져 있다는 뜻이다.

.absolute{
  position: absolute;
  top: 40px; left: 40px;
}

기준이 되는 요소는 위치 지정을 한 부모 요소(static이 아닌 다른 값을 가지고 position속성을 사용한 다른 요소)이다.

만일 그런 부모 요소가 없다면 브라우져의 왼쪽 맨 위를 기준으로 한다.

마찬가지로 방향값을 적용하여 사용한다.

fixed: 배경고정인 background-attachment: fixed;와 비슷하지만 배경이 아닌 요소를 고정한 다는 점에서 다르다.

 .fixed {
        width: 200px;
        position: fixed; /* 브라우저 창 기준 */
   }

스크롤에 관계없이 브라우저 위치에 고정되어있을 수 있다.

sticky: relative처럼 작동하다가 스크롤에 따라 fixed처럼 작동하는 유용한 속성 값.

.sticky{
  position: sticky;
  top: 20px;
}

복잡한 레이아웃 구조를 만드는데 필요한 position속성을 알아보았다.

그렇다면 단순 구조의 위치를 위한 속성은?

바로 float속성이다. 

float

단순 구조 뿐 아니라 가로로 나열하는데도 사용되는 float는 '동동 뜨다'라는 의미를 가지고 있다.

쉽게 남는 영역을 채워주는 속성으로 이해할 수 있다.

원래 이미지와 텍스트의 배치 용도로 사용했지만 레이아웃 용으로 많이 사용된다.

우리는 앞서 HTML 문서의 구조화를 배운 바 있다.

Naver를 예로 들면 각각의 구조들이 자리에 알맞게 들어가 있는 모습을 볼 수 있다

이것이 바로 float를 이용한 것이다.

속성 값으로는 left, right, none 등이 있다.

지금 보여지는 것처럼 왼쪽에 이미지를 두고 

글을 쓸 수 있다. 

float:left;를 사용하여 이렇게 만들 수 있다.

float:right;는 그 반대이다.

이 이미지는 레이아웃에 색을 입혀 나타낸 것으로 위에서부터 헤더, 메인, 섹션, 어사이드, 푸터이다.

이렇게 레이아웃을 만들기 위해서는 float를 어느 부분에서 해제해야 할 때가 있다.

해제하지 않으면 밑의 그림과 같이 푸터가 사이의 공간으로 들어와 버리게 된다.

이럴 때 float를 해제하는 방법은 다음과 같다.

  float를 적용 후 해제하는 방법 4가지

1. float를 적용한 요소의 부모가 없는 경우

다음에 오는 요소에게 clear를 적용한다.

2. float를 적용한 요소의 부모가 있는(container) 경우

  2-1 부모 요소에 height를 적용(하지만 높이가 고정됨)

  2-2 부모요소에 overflow를 적용(hidden/auto)

  2-3 부모 요소에게 ::after 가상 클래스(전후 문자 선택자)를 적용하여
  {content:""; display: block; clear: both;}의 값을 준다.

  예제를 많이 다뤄봐야 각각의 경우에 대해 알 수 있다.

여기서 나온 overflow속성은 텍스트와도 관련이 있다.

공감 또는 훈수 부탁드립니다.(내가 그걸 모를 꺼 같니?? 라던가 응 아니야~이거야~ 해주세요) 

그럼~ 앙 제바

이제까지 적었던 {CSS속성}을 알아보자!

CSS속성도 마찬가지로 방대한 양의 속성과 그 값들이 있다.

먼저 사이트를 통해 얼마나 많은 속성들이 있는지 알아보자

https://developer.mozilla.org/ko/docs/Web/CSS/Reference

모질라에서 제공하는 css참고서이다. 

들어가보면 알겠지만 외우려고 생각하면 벌써 머리아프고 난리다 난리.

그래서 나는 임의로 크게 세 가지로 나누어 보았다.

CSS의 특징을 중심으로 나눴으며 이는 내 개인적인 견해이다.

하지만 CSS를 이해하는데 도움이 되었으면 한다.

• 공간
• 위치
• 글자

먼저 보실 분들은 클릭하셔서 볼 수 있다.

하지만 이에 앞서 단위에 대해 설명하고자 한다.

단위

우리가 사용하는 cm, m 등의 크기 단위처럼 CSS에도 단위가 있다.

크기단위와 색 단위로 나뉘며 각각의 속성값에 사용된다.

크기단위는 px(pixel), pt(point), %(percent) 등이 있다.(CSS size unit, 또는 CSS 크기 단위로 검색)

단위마다 가지는 성질이 각각 다르고 쓰임도 다르다.

색 단위는 원래 영어 단어로 표현했으나 그것으로는 한계가 있기 때문에 나타났다.

색 단위는 hex, rgb, hsl 등이 있다.(CSS color picker로 검색)

단어가 아니라 코드로 그것을 표시한다.

참고로 url( );은 경로를 나타내는 단위이며 이미지를 넣을 때 자주 사용된다.

공간

우리가 볼 수 있는 웹 상의 페이지들은 모두 공간을 가지고 있다.

CSS는 공간이 없다면 사용할 수가 없다.

CSS속성들 중 배경, 테두리, 표 등은 모두 공간을 활용해야만 사용할 수 있다.

HTML의 각 태그들은 저마다의 공간을 가지고 있다.

이러한 태그들의 공간을 Box model이라고 한다.

css box model property으로 검색하면 그에 관한 속성들이 나온다.

위치

마찬가지로 공간이 있어야 위치를 활용할 수 있다.

예쁜 디자인을 적용하려는데 이상한 공간에 않기 위해서 위치 속성이 필요하다.

위치에 관련된 속성은 정렬이나 상대위치, 절대위치 등이 있다.

또 공간을 더하거나 빼어서 위치를 지정하는 방법도 있다. 

(하지만 모바일이나 태블릿으로 볼 경우에 길이가 달라져서 화면이 깨지는 경우도 있으므로 주의)

CSS placement model(CSS 배치 모델)으로 검색하면 그와 관련된 속성또는 설명이 나온다.

글자

HTML에 빠지지 않는 것이 바로 글자이다. 

글자가 보이지 않는 페이지도 있을 수 있다

하지만 접근성을 잘 보여주는 사이트라면 무조건 글자가 필요하다.

대표적으로 text와 font로 나눌 수 있다.

text는 글자, font는 글꼴로 이해하면 편할 것이다.

text에는 서식을 지정하는 속성들이 많고 font에는 글꼴, 크기처럼 디자인 쪽 계열이 많은 것 같다.

각각 CSS text property, CSS font property로 검색하면 그와 관련된 속성들이 나온다.

이렇게 크게 세가지로 나누어 보았다.

다음 장부터 우리는 세부적인 속성들에 대해 또 헷갈리는 부분을 짚어보도록 하자

※ 블로그를 작성하면서 HTML문서와 많은 관련이 있다는 것을 알게 되었다.

블로그도 마찬가지로 페이지이며 HTML 문서이다.

오른쪽의 그림과 같이 tistory에는 HTML모드라는 것이 있다.

HTML모드는 HTML문서로 블로그 포스팅을 할 수 있도록 한 것이다.

이번 포스트에도 HTML의 <a>를 이용하여 세 가지로 나눈 속성에 바로가기를 만들었다. CSS또한 사용이 가능하다. 외부파일을 만드는 방법은 아니지만 임베디드 방식은 사용할 수 있다. 이처럼 우리 주변에도 생각보다 HTML을 활용할 수 있는 공간이 많으니 참고하길 바란다.

공감 또는 훈수 부탁드립니다.(내가 그걸 모를 꺼 같니?? 라던가 응 아니야~이거야~ 해주세요) 

그럼~ 앙 제바