-
개발자와 기획자가 꼭 알면 좋은 css - 1. display : block;html, css/css-display속성들 정리 2018. 7. 7. 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>
오른쪽 빨간 박스 안에 div의 display는 block 이라고 보입니다.
<input>
오른쪽 빨간 박스 안에 input의 display는 inline-block 이라고 보입니다.
<span>
오른쪽 빨간 박스 안에 span의 display는 inline 이라고 보입니다.
이제 이글을 보시는 분들은 div, input, span 의 display 를 아셨습니다. (왜 display가 block고 inline이고, lnline-block 이냐고 물어보시면 죄송하지만 저는 모릅니다. 최초 만드신 분들이 여러가지 이유로 저렇게 설정을 하셨을거라 생각 하며 저도 저렇게 설정된 것을 그냥 알고 사용만 할 뿐입니다.)
그러면 각 태그들의 display가 block, 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 준 것은 생략 하였습니다.)
그런데 위에 하늘색 div는 width를 설정 하지 않았는데 가장 긴것을 볼 수 있습니다.
이것도 display : block의 특성중에 하나인데 이것도 나중에 기회가 되면 설명 하겠지만 지금 간단히 이야기를 하면 display : block 인 태그의 width를 설정 하지 않으면 자기 자신을 감싼 부모 태그 의 width를 따라갑니다.
하늘색 div를 감싼 부모 태그는 <body> 태그 입니다. 그래서 하늘색 태그는
<body> 태그의 width를 따라 적용 된 것입니다.
display: block 인 태그는 태그 안에 있는 요소들을(텍스트, 이미지, display가 lnlin, inlin-block) 오른쪽 정렬, 중앙 정렬, 왼쪽 정렬을 시킬 수 있습니다.
display: block 인 태그에 text-align 이라는 css 속성에 right, left, center 이렇게 지정 해주면 됩니다.
display : block 인 태그들은 div 만 있는것이 아닌대요, 그밖의 여러 태그들이있는데, 하단의 사이트를 참고하시면 좋을 것 같습니다.
https://www.w3schools.com/htmL/html_blocks.asp
display: block 에 특징 에 대해서는 이정도로 정리하고 display : inline-block 에 대해서 다음 장에서 설명 하겠습니다.
그밖의 display 속성 정리 포스팅 글
'html, css/css-display속성들 정리' 카테고리의 글 목록
현재 프리랜서로 프로젝트를 하고 있는 웹퍼블리셔 입니다. 프로젝트하면서 알게된 것들 공부하면서 알게 된 것들을 정리 하고 있습니다.
sh-sida.tistory.com
`
'html, css > css-display속성들 정리' 카테고리의 다른 글
[css] display: grid - 01.gird 속성을 사용해야하는 이유 및 장점 / subgrid에 대해서 / 브라우저 지원 범위에 대해서 (0) 2020.05.11 display : flex 에대해서 - 2.flex-grow, flex-basis (0) 2019.04.09 display : flex 에대해서 - 1.flex-wrap (0) 2019.03.09 개발자와 기획자가 꼭 알면 좋은 css - 3 display : inline (0) 2018.07.23 개발자와 기획자가 꼭 알면 좋은 css - 2. display : inline-block (2) 2018.07.14 댓글
