CSS display

layout을 설정할 때 자주 사용되는 중요한 속성!

기본적으로 HTML 요소는 block 또는 inline 속성을 가짐

block 속성?? inline 속성??

아래서 자세히 설명하겠지만, 이해를 돕기 위해 먼저 간단히 설명하면

block-level Element

내용이 있는 그 자체로 한 줄을 완전히 차지함
ex) <div>, <p>, <form>

inline-level Element

내용이 있는 만큼만 영역을 차지
ex) <span>, <a>, <button>, <input>


위에서 설명한 block-level Element는 display: block,

inline-level Element는 display: inline 속성을 기본으로 가지고 있다.

웹 사이트는 필요한 태그를 용도에 맞게 사용해야 하는데, 모든 태그는 위에서 설명한 것 처럼 display 속성을 가지고 있어, 스타일링을 하면서 변경을 해줘야 하는 순간이 있다.

display 속성의 종류

display: block

흔히 사용하는 div, p 태그를 떠올리면 된다.

특징으로는

  1. 화면 전체 가로폭을 차지
  2. 항상 새로운 라인에서 시작
  3. width, height, padding, margin 설정 가능

이 때 일반적인 경우라면 margin-left는 적용이 되지만,

margin-right는 적용이 되지 않을 것이다.

이유를 생각해보면 단순하다.

block 속성은 한줄 전체를 차지하기 때문에 margin-right가 적용되지 않는 것이다.

주의할 점은 width, height 값을 따로 주지 않았을 때

자식의 width 값은 부모의 width 값을 상속받고,

부모의 height 값은 자식의 height 값을 상속받는다.

말로는 헷갈릴 수 있지만, 머릿속으로 그려보면서 이해하면 당연한 내용이란걸 알 수 있다.

display: inline

흔히 사용하는 a, span 태그를 떠올리면 된다.

특징으로는

  1. content의 너비만큼 가로폭 차지
  2. 줄 바꿈 없이 다른 요소와 함께 배치 가능
  3. width, height 설정 불가능
  4. 상하 여백은 line-heigh, padding 속성으로 지정

별로 헷갈릴 내용이 없고, 컨텐츠의 너비만큼 길이를 가진다는게 전부이다.

display: inline-block

여기부터는 기본적으로 태그가 가진 속성이 아니다.

개인적으로 프로젝트를 하면 이 속성을 가장 많이 쓰는 것 같다.

특징으로는

  1. block과 inline의 특징을 모두 가짐
  2. inline 과같이 한 줄에 표현 가능
  3. width, height, padding, margin 설정 가능
  4. line-height 사용 가능

주의사항은 이 속성을 사용하면 좌우에 4px의 마진이 생기는데,

CSS-reset을 통해 미리 마진을 지워주고 작업하는게 좋다.

가장 많이 쓰는 부분이 컨텐츠를 div로 감쌌을 때, 너비 전체를 차지하게는 안하고 싶다면 inline-block 속성을 주면 된다.

물론 width, height, padding, margin을 잡아줘야 모양이 제대로 나온다.

display: none

그냥 화면에서 아예 안보임

visibility: hidden과의 차이는 display: none은 아예 있어야할 공간 조차 사라짐.

끝으로

CSS는 많이 코드를 쳐보면 쳐볼수록 이해가 더 잘되고, 빨리 습득 할 수 있으니, 직접 쳐보고 차이를 느껴보는게 가장 좋은 방법인 것 같다.

4/159


'개발 > CSS' 카테고리의 다른 글

CSS 변수(variables)  (0) 2017.10.13
CSS 포지션(position)  (0) 2017.10.12
CSS 디스플레이(display)  (0) 2017.10.12
CSS 박스모델(box-model)  (0) 2017.10.12
CSS reset  (0) 2017.06.09
CSS flex-box 재미있게 익히기  (0) 2017.04.24

CSS 박스모델(box-model)

box-model 이란?

CSS Box Model은 요소를 위해 생성되고 비주얼 서식 모델을 따라 배치되는 사각형 박스(패딩 및 마진 포함)를 정의하는 CSS 모듈입니다.

라고 MDN에 친절하게 적혀있고,

구글 개발자도구에서 흔히 볼 수 있는 그 모양이다.

왜 알아야 하는가?

보통 개발을 하면서 시안에 맞게 코드를 작성 하는데도,

이상하게 시안과 다른 결과물이 브라우저에 잡히게 된다.

대부분의 이유는 박스모델에 대한 이해가 부족해 생기는 일이다.

예시를 통한 이해

만약 디자이너가 박스의 너비를 800px, border 를 1px solid red로 만들어달라 했다.

그래서

.box {
    width: 800px;
    border: 1px solid red;
}

위와 같이 작성을 할 것이고,

기분좋게 새로고침을 딱 해서 너비값을 찍어보면 우리가 기대한 800px이 아닌 802px이 잡힌다.

왜일까?

기본적으로 브라우저는 width값을 content-box의 너비라고 생각하기 때문에, 브라우저에서 보는 박스의 너비는 width(800px)에 양 옆 border(1px)씩을 더한 802px이 된다.

그러면 우리는 디자이너 시안에 맞추기 위해 width를 800px이 아닌 798px로 적어줘야 하는건가?

페이지에 픽셀을 계산해야 하는 부분이 한두곳이 아니기 때문에 상당한 비효율 그 자체다.

대안

페이지 전역에 들어가는 CSS 파일에 아래와 같은 스타일을 먹여주면 된다.

* {
    box-sizing: border-box;
}

모든 태그의 박스 사이징의 기준을 border로 본다는 뜻이다.

그러면 아까와 같은 상황에서 브라우저는 width를 content-box가 아닌 border-box로 보기 때문에

양 옆의 margin 1px씩을 뺀 798px이 자동으로 content-box의 너비가 되고 총 박스의 너비는 800px이 된다.

설명 만으로는 이게 왜 중요한가 와 닿지 않을 수 있는데,

실질적으로 프로젝트를 하다 보면 필요성을 자연스럽게 느낄 것이고, 그 때 사용하면 될 것!

4/159


'개발 > CSS' 카테고리의 다른 글

CSS 포지션(position)  (0) 2017.10.12
CSS 디스플레이(display)  (0) 2017.10.12
CSS 박스모델(box-model)  (0) 2017.10.12
CSS reset  (0) 2017.06.09
CSS flex-box 재미있게 익히기  (0) 2017.04.24
CSS / float를 clear하는 방법 네가지(clearfix)  (5) 2017.04.13
159

블로그에 채팅 기능 달기

현재 티스토리 블로그에 채널이라는 채팅 서비스를 달아놨는데, 어떻게 한건지 물어보신 분들이 몇분 계셔 포스팅으로 알려드리려 합니다.

다른 블로그도 다 비슷한 방법으로 되겠지만,

현재 티스토리 블로그를 운영중이니 해당 환경에서 하는 방법을 알려드리겠습니다.

우선 위의 링크를 따라 페이지에 접속합니다

회원 가입 후 로그인을 하고

왼쪽 아래의 톱니바퀴 설정버튼 > 플러그인 설정 탭에 들어가 새 플러그인 만들기 버튼을 누릅니다.

버튼 클릭 후 원하는 내용을 작성 후에 확인을 누릅니다.

플러그인 목록에서 코드보기 클릭 후 아래와 같은 창이 뜨면 클립보드 복사버튼을 클릭합니다.

티스토리 관리자 탭에서 HTML/CSS 편집을 눌러 들어간 뒤

command + f (윈도우는 컨트롤 f)로 </body>라고 검색하고 검색 결과 바로 윗 부분에 복사한 내용을 붙여넣기하고 저장!

끝입니다 ㅎㅎ 이해 안되시면 질문 주세요 / 다른 플랫폼도 비슷한 방법으로 진행하시면 됩니다.

3/159


  1. BlogIcon 해외 축구 중계 2018.05.10 17:26

    오 이게 실제로 되는군요!
    덕분에 편하게 달고 갑니다!
    좋은 하루되세요!

159

나를 흔드는 15가지 트리거

  1. 내가 이해한다면, 나는 실제로 바뀔 것이다.
  2. 나는 의지력이 강해서 유혹에 굴복하지 않을 것이다.
  3. 오늘은 특별한 날이기 때문이다.
  4. 적어도 나는 누구보단 낫다.
  5. 나는 누구의 도움도 필요 없다.
  6. 난 지치지 않을 것이고, 열정은 사그라지지 않는다.
  7. 세상의 모든 시간은 나의 것이다.
  8. 내 정신은 산만해지지 않을 것이고, 예기치 못한 일은 일어나지 않을 것이다.
  9. 통찰의 순간이 와서 내 인생은 바뀔 것이다.
  10. 내 변화는 영구적이니 다시 걱정 할 필요가 없다.
  11. 이전 문제를 해결하면 새 문제가 생기지 않을 것이다.
  12. 나는 노력한 만큼 정당한 대가를 얻을 것이다.
  13. 누구도 내게 관심을 기울이지 않는다.
  14. 내가 변한다면 그건 진짜 내가 아니다.
  15. 난 내 행동을 평가할 수 있을 정도의 지혜는 갖고 있다.

위의 15가지는 Trigger라는 책에서 소개한 내용이다.

매일매일 읽으면서 리마인드하면 자기계발하는데 도움을 줄 수 있을 듯 하다.

2/159


  1. BlogIcon 핸드폰 내구제 2017.10.24 11:27

    와 이거 진짜 좋은데요
    그 트리거 라는 책이 국문으로
    되어있는건가요 함 읽어봐야겠네요

HTML5에서의 시맨틱 웹과 시맨틱 태그(Semantic Web, Semantic tag)

시맨틱 웹이란?

구글에 검색했을때 위키백과에 나오는 내용을 그대로 적어보면 아래와 같다.

시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,

현재의 인터넷과 같은 분산환경에서 리소스에 대한 정보와 자원 사이의 관계의미 정보를 기계가 처리할 수 있는 온톨로지 형태로 표현하고,

이를 컴퓨터가 처리하도록 하는 프레임워크이자 기술이다.

웹의 창시자인 팀 버너스리가 1998년 제안했고 현재 W3C에 의해 표준화 작업이 진행 중이다.

쉽게 생각하면 첫 줄만 읽으면 된다.

의미론적인 웹은 말 그대로 컴퓨터가 웹사이트를 단순한 코드의 구성이 아닌 의미를 가진 사이트라는걸 알 수 있게 만드는 것이다.

시맨틱 웹의 이상향은, 인터넷에 방대한 양의 데이터를 컴퓨터가 자동으로 해석해 사용자가 원하는 결과값을 정확히 주는 것이다.

여기까지 읽었을 땐 단순히 검색엔진 성능 향상에만 유용하게 쓰일 것 같지만, 찾아보니 암 치료 증진에도 기여할 수 있고, 석유가스 산업에도 응용될 수 있으며, 이외에도 많은 기업에서 사용할 수도 있다고 한다.(어떻게 이런 결과가 도출된건지는 잘모르겠다ㅋㅋ)

크게 생각 했을때 데이터들을 관리하고 통합하는 것이기 때문에 위와 같은 기대를 하는 것 같다.

HTML5에서의 시맨틱 웹

HTML5 이전까지는 시맨틱 태그라는 것이 없었다.

그 때의 대부분의 태그는 <div>로 감싸져 있었을텐데,

개발자의 입장에서는 코드로 사이트 전체 구조를 한눈에 파악하기 힘들었을 것이고, 검색 엔진은 사이트의 의미를 정확히 파악하지 못해 검색 결과값의 정확도가 떨어졌을 것이다.

그래서 나온 대안이 시맨틱 웹이고, 그에 따라서 HTML5에서 시맨틱 태그(Semantic tag)라는 것이 나온 것이다.

예를 들어 설명하면

기존에는 <div class="header">헤더입니다</div> 이렇게 썼던걸,

<header>헤더입니다</header> 이런식으로 쓰는 것이다.

<div>태그, <header>태그 둘 다 구역을 나눌 때 쓰는 껍데기 태그인데 둘의 차이는 의미를 가지고 있는지의 차이이다.

태그 이름 그대로 헤더부분을 <header>태그로 감싸는 것이다.

위와같이 div를 대체할 수 있는 태그로 header, nav, article, section, aside, footer가 나왔고, 각각 의미에 맞게 사용하면 된다.

위 태그들은 HTML5 이전에 div태그에서 클래스 명으로 많이 쓰던 것들을 토대로 만들었다고 한다.

결론

안써도 겉으로 보이기엔 똑같지만 검색 엔진 최적화(SEO)에서 중요한 역할을 하기 때문에 검색결과에서 상단을 차지하고 싶다면, 쓰는것을 습관화 하는 것이 좋다.

끝!

2/159

+ Recent posts