ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 개발자와 기획자가 꼭 알면 좋은 css - 1. display : block;
    html, css/display 2018.07.07 03:11

    몇몇 프로젝트를 경험 하면서 느낀건데,  제가 경험한 기획자님과, 웹 개발자님들은 크롬 요소 검사로 css를 보실 줄 알아서

    여러가지로 코딩 관련 이야기 하는데 있어서 편하게 이야기를 할 수 있어서 좋았고 간단한 수정건들도 굳이 css를 작업하여 주지 않고 구두로나 메일로 코멘트만 해주어도 알아서 수정을 해주어서 간단하게 작업을 마무리 할 수 가 있었는데,

    개발자님과 기획자님들이 이정도는 필수 알고 있으면 좋을것 같은 것들을 몇가지 정리를 해봅니다.



    1. 태그의 display 속성 과 특징 알기.

    당연히 <div></div> 를 모르는 개발자님, 기획자님은 없을 것이라고 생각합니다. 

    하지만 div의 특징은 잘 모르는 분들도 있을 것입니다. 

    간혹 개발자님들이 이 div 들끼리 붙이고 싶다거나, 아니면 div 안에 내용을 오른쪽 정렬, 중앙 정렬 한다거나 이런 간단한 문의를 받아본 경험이 있는데, 태그의 display 속성만 알면 쉽게 해결 할 수 있는 부분들 입니다.

    서론이 길었는데 이제 부터 정리를 하겠습니다.


    <div></div>, <span><span/><input type="text"> 자주보는 태그 입니다.

    html 태그들은 각각 display: 속성이 있는대, 자주 사용하는 div, span, input, 이렇게 3개만 살펴 보겠습니다. 



    위에 이미지처럼 각각의 태그를 코딩 한 html 을 크롬 브라우저에서 열어서

    요소 검색창으로 소스를 확인해보겠습니다. (크롬브라우저에서 연 후 f12 키를 눌러서 확인 가능합니다.)


    각각의 태그를 마우스로 찍으면 오른쪽에 style창에 각 태그의 관한 정보를 볼 수 있습니다.


    <div>

    오른쪽 빨간 박스 안에 divdisplayblock 이라고 보입니다.


    <input>

    오른쪽 빨간 박스 안에 inputdisplayinline-block 이라고 보입니다.


    <span>


    오른쪽 빨간 박스 안에 spandisplayinline 이라고 보입니다.


    이제 이글을 보시는 분들은 div, input, span 의 display 를 아셨습니다. (왜 display가 block고  inline이고, lnline-block 이냐고 물어보시면 죄송하지만 저는 모릅니다. 최초 만드신 분들이 여러가지 이유로 저렇게 설정을 하셨을거라 생각 하며 저도 저렇게 설정된 것을 그냥 알고 사용만 할 뿐입니다.)

    그러면 각 태그들의 displayblock, inline-block, inline 이라고 나타나는데 이것의 특징을 지금 부터 설명 하겠습니다.


    display : block 에대해서 먼저 설명하겠습니다.

    다음과 같이 width가 각각 다르게 설정한 div태그 4개를 코딩한 화면과 소스를 보겠습니다.(알아보기 쉽게 background 도 주었습니다.)


    보시면 아시겟지만 div1 이라고 코딩한 div 가 가장 위에 있고, 그다음엔 div2, 그다음엔 div3, 이렇게 순서대로 차곡 차곡 쌓아진 것을 볼수 있습니다.


    display : block의 가장 큰 기본 특성 태그들을 태그 위치  순서대로 차곡 차곡 쌓는 것입니다.  

    이 말은 태그들을 옆으로 붙어지지 않게 설정 되어 있다는 말이기도 하죠. ( display : block 을 옆으로 붙일 수 있는 방법은 따로 있는데 그건 나중에 설명 하겠습니다. 힌트만 줄가요? f로 시작 하는 css를 주거나, display의 block을 다른것으로 바꿔주면 됩니다. 무엇으로 바꿔주면 되냐면 이 글을 다보시면 아시겟죵?ㅎㅎ;;;;)

    그다음 특징width를  설정 할 수 있습니다. height 도 설정 할 수 있습니다. (제가 height가 적용된 이미지는 누락하였네요 --;;)

    위에 이미지를 보면 각각의 div 태그 길이가 다른 것을 볼 수가 있죠.? 제가 스타일을 div2 라고 쓴 태그부터 div4 라고 쓴 태그 까지  width: 400px, width: 500px. width: 600px 이렇게 적용 하여서 그런 것입니다.  ( css 준 것은 생략 하였습니다.)


    그런데 위에 하늘색 divwidth설정 하지 않았는데 가장 긴것을 볼 수 있습니다. 

    이것도  display : block특성중에 하나인데 이것도 나중에 기회가 되면 설명 하겠지만 지금 간단히 이야기를 하면 display : block 인 태그의 width설정 하지 않으면 자기 자신을 감싼 부모 태그width를  따라갑니다.


    하늘색 div를 감싼 부모 태그<body> 태그 입니다. 

    그래서 하늘색 태그는 <body> 태그의 width를 따라 적용 된 것입니다.


    display: block 인 태그는 태그 안에 있는 요소들을(텍스트, 이미지, display가 lnlin, inlin-block오른쪽 정렬, 중앙 정렬, 왼쪽 정렬을 시킬 수 있습니다.


    displayblock 인 태그에 text-align 이라는 css 속성right, left, center 이렇게 지정 해주면 됩니다.


    display : block 인 태그들은 div 만 있는것이 아닌대요, 그밖의 여러 태그들이있는데, 하단의 사이트를 참고하시면 좋을 것 같습니다.


    https://www.w3schools.com/htmL/html_blocks.asp


    displayblock 특징 에 대해서는 이정도로 정리하고 display : inline-block 에 대해서 다음 장에서 설명 하겠습니다. 
























    `




    댓글 0

Designed by Tistory.