TIL/CSS (9) 썸네일형 리스트형 inline-block의 사용과 문제점 inline-block의 사용 기본적으로 div 태그는 block 요소이다. 따라서 위와 같은 코드를 작성하면 아래와 같이 표현된다. 만약 div의 display 속성값을 inline으로 바꾸게되면 화면상에는 아무것도 보이지 않게된다. 그 이유는 inline 요소는 height와 width를 가질 수 없기 때문이다. 만약 inline요소이면서 block처럼 width와 height을 가지게 만들고 싶다면 다음과 같이 HTML 코드를 작성하면 된다. display 속성의 값으로 inline-block을 주었다. 그 결과는 아래와 같다. inline-block의 경우 block과 같이 height과 width를 가질 수 있으며 사방에 margin을 주는 것도 가능하다. 또한 inline처럼 바로 옆에 다른 .. inline 요소에서의 padding과 margin inline 요소 중 하나인 span 태그를 생성하고 hello라는 text를 넣어주었다. 그리고 background-color를 darkseagreen으로 설정한 결과 다음과 같은 화면이 출력되었다. padding 속성 해당 span 태그에 padding 속성으로 20px의 값을 주었을 땐 어떻게 동작할까? hello hello inline 요소의 경우 padding은 위, 아래, 왼쪽, 오른쪽 모두 잘 적용된다. 이미지에서 보이듯 hello 라는 문구 주변으로 동일한 px의 공백이 생기는 모습을 볼 수 있다. margin 속성 이번에는 동일한 span 태그에 margin 속성을 부여해보겠다. hello hello 뭔가 예상과 많이 다른 모습이다. 공백이 왼쪽과 오른쪽에만 적용되고 위아래에는 적용되지 .. 모든 태그에 css 속성을 적용하는 방법 모든 태그에 css 속성을 적용하는 방법 개발을 하다보면 모든 html 요소들에 대해 같은 css를 적용해야 할 수도 있다. 그럴 때 모든 태그에 같은 css 속성을 추가해주는 대신 사용할 수 있는 방법이 있다. div 태그에만 줬던 border 속성을 * 표시에 준 모습이다. 여기서 * 는 모든 html 요소들을 가리킨다. 덕분에 body, div 가릴 것 없이 모두에 border 속성이 추가되었다. * 를 통해 모든 html 요소에 border를 추가했다면 inline 요소인 span 태그에도 border가 적용될까? third 태그의 안쪽에 span 태그를 추가하고 content는 hello로 넣어준 모습이다. hello span태그 역시 텍스트 주변으로 border가 잘 만들어진 모습을 볼 수 있다. border와 border-style border 속성 경계와 관련된 속성 3가지가 있다. margin, padding, border 이다. margin과 padding은 앞서서 다루어보았다. 2023.07.21 - [TIL/CSS] - margin 속성 사용법과 collapsing margins 현상 2023.07.22 - [TIL/CSS] - padding의 개념과 id로html에 css 주입하는 방법 이번에는 마지막으로 border에 대해 알아볼 것이다. 이것이 바로 div 태그에 border 속성을 적용해본 모습이다. border 속성에는 테두리의 두께, 종류, 색깔을 값으로 넣어줄 수 있다. 위의 경우에는 2px의 두께, solid라는 종류, black을 색으로 넣어주었다. 더 다양한 border의 종류는 아래의 링크에서 확인할 .. padding의 개념과 id로html에 css 주입하는 방법 padding의 개념 padding은 margin과는 반대 개념이다. 2023.07.29 - [TIL/CSS] - margin 속성 사용법과 collapsing amrgins 현상 margin이 경계의 바깥 부분을 의미했다면 padding은 경계의 안쪽 부분을 의미한다. html { background-color: blueviolet; } body { background-color: aqua; margin: 0; } div { height: 150px; width: 150px; background-color: white; } body 태그의 margin 속성에 0이라는 값을 주었을 때의 모습이다. 위쪽, 오른쪽, 왼쪽이 모두 html 경계와 맞닿아있다. 이 때 body 태그에 padding 속성을 주면 .. margin 속성 사용법과 collapsing margins 현상 margin 속성 사용법 위의 코드로 html 문서를 작성하고 웹 브라우저를 통해 실행하면 body 태그에 웹 브라우저에 추가한 css가 보인다. 사용자 에이전트 스타일시트라는 부분이 바로 내가 입력한 것이 아니라 웹 브라우저에서 html 파일을 실행할 때 스스로 추가하는 css이다. 여기서 보면 margin 이라는 속성이 8px이라는 값을 가진것으로 나온다. 이것이 실행되어 보이는 화면이 바로 아래의 이미지이다. 이미지를 보면 위쪽과 왼쪽에 일정부분의 공백이 있고 흰색의 div 영역이 있는것을 볼 수 있다. 이것이 바로 margin이 적용되었기 때문에 나타나는 현상이다. 여기서 margin은 block 요소가 가지는 속성 중 하나로 block 요소의 경계 바깥의 공간을 의미한다. margin의 값을 0.. display속성으로 block, inline 제어 display 속성 태그에는 block, inline 두 종류가 있다. block은 해당 요소의 옆에 다른 요소가 들어갈 수 없고 inline 요소는 해당 요소 옆에 다른 요소가 들어갈 수 있다. 하지만 block요소를 inline 요소처럼 옆에 다른 요소가 오게 만들거나 inline요소 옆에 다른 요소가 올 수 없게 만들 수도 있다. 바로 display 속성을 사용하는 것이다. span 태그 block으로 만들기 hello hello 기본적으로 span 태그의 display 속성값은 inline이다. 하지만 해당 속성값을 block으로 바꾸면 다음과 같은 결과가 나온다. hello hello div태그 inline으로 만들기 기본적으로 div 태그의 display 속성값은 block이다. 해당 조건으로.. css 개념 정리 기본적인 개념 CSS는 특정 HTML 태그를 가리켜 해당 태그를 꾸며주는 일이다. 이 때 가리키는 태그를 선택자(selector)라고 한다. 선택자 { 속성1: 값; 속성2: 값; } 위에서 보이는 코드처럼 선택자를 통해 HTML태그를 선택하고 해당 태그에 적용하고자 하는 속성과 그 값을 입력하면 된다. 파란색 25px h1 태그에 "파란색 25px" 이라는 문구를 작성하고 해당 태그를 선택하여 색과 글씨 크기를 변경해준 것이다. 적용 결과는 아래와 같다. 같은 태그에 CSS 속성 부여하기 CSS를 html문서에 적용하는 방법은 두 가지가 있었다. 2023.07.12 - [TIL/CSS] - css를 html에 적용하는 방법 css를 html에 적용하는 방법 1. html 파일에 css 코드를 추가한다... 이전 1 2 다음
