HTML25 [CSS] 박스 모델 html/css를 처음 다룰때 인라인 요소와 블록 요소를 다뤘었습니다. 이 중 블록 요소는 한 칸을 차지하며, 자동 줄바꿈이 이루어진다고 했습니다. 그래서 블록 요소를 살펴보면 웹 페이지에서 박스 모양의 공간을 가지게 되는데 이런 요소들을 박스 모델이라고 부릅니다. 인라인 요소와 블록 요소에 대한 설명은 아래 링크로... 2020/08/18 - [Programming/HTML,CSS] - [HTML/CSS] 블록 요소와 인라인 요소 마진과 패딩, 테두리를 조작하는 속성 2021/01/25 - [Programming/HTML,CSS] - [CSS] 마진(margin)과 패딩(padding) 2021/01/25 - [Programming/HTML,CSS] - [CSS] 콘텐츠 영역 설정하기 2021/01/2.. 2021. 1. 27. [CSS] 콘텐츠 영역 설정하기 지난 포스트에서 마진과 패딩을 다뤘는데 이번엔 콘텐츠 영역을 설정하는 것을 다루겠습니다. 1. 콘텐츠 크기 지정하기 콘텐츠의 크기는 다음의 두가지 속성으로 조절합니다. width: 속성 값; height: 속성 값; 말 그대로 width는 콘텐츠의 너비, height는 콘텐츠의 높이입니다. 두 속성의 속성 값은 아래와 같습니다. 속성 값 효과 크기 너비/높이를 단위와 수치로 직접 지정 백분율 콘텐츠를 포함하는 부모요소의 크기를 기준으로 백분율로 지정 auto 너비와 높이가 콘텐츠의 양(길이, 크기 등)에 따라 자동 지정 +1. 실제 콘텐츠의 크기 방금과 같은 방법으로 너비와 높이를 지정했더라도 실제 콘텐츠의 크기는 위에서 지정한 값이 아닙니다. 왜냐하면 실제로 요소를 웹에 배치할때 지난 포스트에서 배운 .. 2021. 1. 25. [CSS] 마진(margin)과 패딩(padding) 웹에서 마진과 패딩을 여백을 의미합니다. 마진과 패딩을 이용하면 콘텐츠를 원하는 곳에 배치할 수 있기에 활용도가 높습니다. 들어가기전에 마진과 패딩을 한눈에 볼 수 있게 표현하면 다음과 같습니다. 콘텐츠와 패딩을 묶어서 하나의 요소로 보고, 요소와 마진 사이의 경계를 테두리(border)라고 합니다. 1. 마진 (margin) 마진은 현재 요소 주위의 여백입니다. 마진을 조절하여 요소와 요소사이의 간격을 조절할 수 있습니다. 마진은 다음과 같은 속성으로 조절합니다. 마진 속성: 속성 값; ▽ margin-top: 상단의 여백 크기 지정 ▽ margin-bottom: 하단의 여백 크기 지정 ▽ margin-left: 좌측의 여백 크기 지정 ▽ margin-right: 우측의 여백 크기 지정 ▽ margin.. 2021. 1. 25. [CSS] 가상 클래스, 가상 요소 가상 클래스와 가상요소에 대해 알아보겠습니다. 가상이라는 단어가 붙었다고 한다면 존재하지 않지만 존재하는것으로 간주한다는 의미입니다. 가상 클래스와 가상 요소는 많은 종류를 가지고 있는데 포스트에서는 사용 빈도가 높은 것들을 몇가지만 소개하겠습니다. 1. 가상 요소 우선 가상 요소부터 다루어 보도록 하겠습니다. 가상 요소는 문서의 내용에서 원하는 부분에만 스타일을 적용시키기 위한 용도입니다.예를들면, 첫 번째 글자 라던가, 문장의 앞 부분과 같은 부분입니다.가상 요소는 '::'을 이용해서 작성하는데 콜론을 한 번 써도 되지만 이후에 나오는 가상 클래스와의 구분을 위해 콜론을 두 번 사용하는 것을 강력히 권고합니다. 1-1. 첫 번째 줄, 혹은 첫 번째 글자에 스타일 적용하기 우선, 첫 번째 글자 가상 요.. 2020. 9. 28. [HTML/CSS] 색상 표기 이번 포스트에서는 짤막하게 쉬어가는 코너겸 앞으로 주구장창 나오게될 색상 표기에 대해 다루겠습니다. 여태까지 예제를 들면서 background-color, bgcolor, color...등등 수많은 색상 효과를 썼습니다. 그럴때 마다 저는 색상이름을 적는(ex. red, yellow, green...)방식을 사용했습니다. 하지만 웹 상에서는 여러가지 방법으로 색상을 표현 할 수 있습니다. 1. 색상 이름 표기법 yellow 색상 이름 표기법은 말 그대로 색의 이름을 적는 방식입니다. blue, red, black등 우리가 영단어로 표현 할 수 있는 색상들입니다. 하지만 이런 표기에는 단점이 있는데, 바로 모든 색을 단어로 표현 할 수 없다는 점 입니다. 그래서 색상 이름 표기법으로 표기 가능한 색상은 기.. 2020. 9. 27. [CSS] 셀렉터 3 - 속성 셀렉터 이번 포스트에서는 태그 내부의 속성에 따라서 스타일을 다르게 적용할 수 있는 속성 셀렉터들에 대해서 다루겠습니다. 같은 태그라도 속성에 따라 다른 스타일을 적용할 수 있기 때문에 더 다채로운 구성이 가능해집니다. 1. 속성 셀렉터의 기본 속성 셀렉터는 기본적으로 다음과 같은 형태를 띕니다. 셀렉터[속성] { 속성: 속성 값; } [ ]사이에 원하는 속성을 지정하여 효과를 주게 됩니다. 셀렉터를 지정하지 않았을 경우 문서 내의 모든 요소에서 해당 속성을 가진 요소에 스타일이 적용됩니다. 아래 예제는 a태그에 href속성이 존재하면 붉은 글씨로 나타나게 스타일을 적용시킨 모습입니다. 이와같이 href속성이 없을 경우에는 스타일이 지정되지 않아 속성에 따라 다른 스타일을 적용할 수 있음을 보여줍니다. 2. 속.. 2020. 9. 27. 이전 1 2 3 4 5 다음 300x250
