안녕하세요 MIN입니다.
오늘은 태그의 display속성에 대해 공부해볼께요. 개인적으로는 작업할때 제일 중요하면서 가볍게 생각하는 부분인거 같아요. 조금 더 자세히 들어가게 되면 블럭 요소들도 태그에 따라 사용되는게 많이 달라지기 때문에 오늘은 가볍게만 알아볼께요.
첫번째로 block 속성입니다.
제가 저번에 html은 건축과 비슷하고 했었죠?? 그런 느낌으로 이야기 하면 block속성은 방을 나타낸다고 생각해요.
우리가 사용하는 대표적인 block 태그는 p, div, ul, ol, h시리즈 등이 있습니다.
한번 여기서 각 태그들을 한번씩 사용해 보세요. 볼로그 글로 보는거 보다 한번 사용해보시면 이해가 더 쉬울꺼에요.
두번째로 inline 속성입니다.
inline 속성은 태그안에 있는 컨텐츠 만큼의 영역을 가지고 있습니다.
비유 하자면 으흠..... 방안에 있는 붙박이장? 그런느낌이라고 해야될까요? 처음 제작할때부터 크기가 정해져 있어서 사용자가 크기를 바꿀수 없는?
대표적인 태그로는 a, span, img 등이 있습니다.
저는 주로 블럭 요소 안에서 주변에 영향을 주지 않으면서 디자인이 변형되지 않게 하기 위해서 사용을 많이 합니다.예를 들어서 p태그로 글을 작성중에 특정 문자에 링크나 글자색을 바꾸고 싶을때 링크는 a태그 글자색을 span을 이용해서 사용 합니다.
세번째로 inline-block 속성입니다.
우리가 inline 요소를 사용하지만 block요소럼 크기도 지정해주고 싶고 다양한 css를 넣어주고 싶을때 사용하는 속성입니다.
p태그 안에 문자에 디자인이 조금 들어가고 크기가 들어가고 해야되서 p태그 안에 div를 넣거나 할 수 없고 그렇다고 해서 inline요소의 태그에 block을 줄 수는 없는 상황일때 inline-block을 사용 하시면 됩니다.
제가 예시를 들어서 보여 드리면 조금 더 이해하기 쉬울거 같네요.
See the Pen Untitled by piwe2004 (@piwe2004) on CodePen.
위의 코드를 보시면 block 과 inline, inline-block 차이가 보이시나요.
우리가 퍼블리싱을 할때 블럭 요소에 inline을 넣고 padding을 넣고 하더라도 블럭이 그 영역을 인지 하지 못하여서 inlie요소가 block요소 밖으로 나가는 모습 우리가 블럭 요소 안에서 글자색만 변경하거나 링크 작업만 하는게 아니라면 inline-block을 사용하여야 합니다. 그리고 보시면 inline요소는 좌우에 여백이 있기 때문에 따로 정렬하는 css를 넣지 않으면 작업하실때 좌우 여백을 확인 하셔야 합니다.
오늘은 가볍게 display의 속성을 알아보았는데 많이 부족한 내용이라 혹시 조금 더 자세한 내용이 궁금하시면
http://www.tcpschool.com/css/css_position_display
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
해당 사이트 들어가셔서 공부해 보시는거 추천드려요.
'HTML·CSS' 카테고리의 다른 글
| 같이 공부하며 배우는 : 선택자?? (0) | 2023.02.20 |
|---|---|
| 같이 공부하며 배우는 : CSS이란? (0) | 2023.01.24 |
| 같이 공부하며 배우는 : HTML 구조 (0) | 2023.01.15 |
| 같이 공부하며 배우는 : HTML 원리 (0) | 2023.01.15 |
