제발 제 코드에 훈수하세요

CSS 속성

• 공간
• 위치
• 글자

공간

제일 먼저 html태그와 body태그의 기본적인 공간부터 margin, width, hieght, padding, border속성에 대해 알아보자

왜 html태그와 body태그의 기본적인 공간을 알아야 하느냐 

html태그는 전체의 공간을 차지하고 있다.

body태그는 그 중 내용이 담길 공간을 차지하고 있는데 html과 body 사이에 조금의 margin값이 반영되어있다.

그렇다면 margin값은 무엇인가?

margin

'바깥 쪽 여백'을 의미하는 margin값은 숫자 뒤에 단위를 넣어 사용할 수 있다.

단위는 (px, %, em 등  크기 단위를 말한다.)

공간이 있다면 방향도 존재한다.

margin값은 top, right, bottom, left의 방향 값을 가진다.

top부터 시계방향순으로 한꺼번에 적을 수 있다. 

/*예시*/

div {
  /*각각*/
  margin-top:50px;
  margin-right:0;
  margin-bottom:0;
  margin-left:50px;
  /*한꺼번에*/
  margin:50px 0 0 50px;
}

margin은 기본 여백을 설정하는 속성이라면 태그들의 기본 공간을 설정하는 속성은?

바로 width(와이드: 넓이)와 height(하이트: 높이)이다.

width, height

margin과 마찬가지로 숫자 뒤에 단위를 사용하여 나타낼 수 있다.

width는 가로의 길이

height는 세로의 길이

이미 방향이 정해져 있으므로 둘은 따로 방향값을 가지지는 않는다.

/*예시*/
div{
  width:50px; 
  height:50px;
}

이렇게 공간을 설정하고 마음이 바뀌면 width와 height를 계속해서 바꿔줘야 할까?

만약 그렇지 못한 상황이 있을 수 있다.

그렇다면 공간을 추가할 수 있는 속성은 무엇일까?

바로 padding속성이다.

padding

'안 쪽 여백'을 의미하는 padding도 마찬가지로 숫자 뒤에 단위를 사용하여 나타낸다.

어느 방향으로 공간을 추가할지 정해야 하기 때문에 방향 값이 필요하다.

padding값도 top, right, bottom, left의 방향 값을 가진다.

top부터 시계방향 순으로 한꺼번에 적을 수 있다. 

/*예시*/

div {
  /*각각*/
  padding-top:50px;
  padding-right:0;
  padding-bottom:0;
  padding-left:50px;
  /*한꺼번에*/
  padding:50px 0 0 50px;
}

width와 height, padding으로 이루어진 공간들을 구분하기 위한 속성

바로 border이다.

border

'테두리'속성인 border값도 마찬가지로 숫자 뒤에 단위를 사용한다.

공간 관련 속성에 테두리를 왜 뜬금없이 넣었는지 궁금할 수 있다.

이 테두리의 px값도 공간을 차지하기 때문이다!!(ㄷㄷㄷㅈ)

border도 어느 쪽에 테두리를 넣을지 선택하기 위해 방향 값을 가진다.

margin이나 padding처럼 방향 모두를 한꺼번에 쓸 수 없다.

하지만 border는 기본적으로 테두리의 굵기, 형태, 색 순으로 써준다.(이렇게 써주면 사각형으로 테두리가 나타난다.)

/*예시*/
div{
  /*기본 공간 설정을 해 주지 않으면 태그가 가진 공간으로 테두리를 형성*/
  width: 40px;
  height: 50px;
  border: 10px solid #000;/*굵기 형태 색*/
  }

확인

각각의 값들은 페이지에서 마우스 우클릭 후 검사를 클릭하면 이렇게 나타난다.(크롬 기준)

제일 안 쪽의 파란색 부분이 각각 width와 height부분이다.

적혀 있듯이 다음 바깥의 초록 부분은 padding, 구분해주는 border(테두리), 주황색인 margin속성이다.

position은 다음 장인 위치에서 다루도록 하겠다.

※여기서 꿀팁

margin과 padding 둘 다 여백이라서 헷갈릴 여지가 있다.

하지만 직접 써보면 알 수 있듯, margin은 width, height의 바깥쪽 부분을 padding은 안쪽 부분에 관여한다.

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

그럼~ 앙 제바

이제까지 적었던 {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을 활용할 수 있는 공간이 많으니 참고하길 바란다.

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

그럼~ 앙 제바