'coding/html + css' 카테고리의 글 목록 (18 Page)

[css] 모서리 둥글게 하기

안녕하세요. 플입니다. 오늘은 요소의 모서리를 둥글게 만들어보겠습니다. 1. 배경이 채워진 사각형 우선 배경색이 들어간 요소를 준비해주세요. 기본적으로 사각형 모양이니 배경색만 넣어주시면 됩니다. span{ background:#4cb1d6; } 배경색은 background를 이용해서 넣어주세요. 2. border-radius span{ border-radius:15px; } border-radius를 이용해 모서리를 둥글게 만들어주세요. 단위는 px입니다. 저는 잘 보이려고 큰 값을 줬지만 적당히 주는 것이 이쁘게 나옵니다. 한 5px 정도가 적당해 보입니다. 3. 값 따로 주기 span{ border-radius:15px 0 0 0; } border-radius는 마진과 비슷하게 값을 각각 줄 수 있..

coding/html + css · 2019. 11. 9. 07:30

[css] 자간 줄이기

안녕하세요. 플입니다. 오늘은 자간을 줄여보겠습니다. 1. 글 입력 자간을 조정해줄 글을 먼저 입력합니다. 저는 일부분만 캡처해왔습니다. 어떤 태그를 사용하는지는 상관없습니다. 2. letter-spacing span{ letter-spacing:-1px; } 두 이미지의 차이가 보이시나요? 아래가 letter-spacing을 적용한 이미지입니다. 확실히 자간이 붙어있죠. letter-spacing은 이런 식으로 가독성을 더 좋게 만들기 위해 조정해줍니다. 보통 한글을 적을 때는 -1 정도 값을 주는 편이에요. 폰트에 따라서 다르지만요. 그럼 이만. 총총.

coding/html + css · 2019. 11. 8. 07:30

[css] 나란하게 배열

안녕하세요. 플입니다. 오늘은 float을 이용해 요소를 나란하게 만들어보겠습니다. 1. float float을 이용해 연도 부분과 내용 부분을 한 줄에 넣을 것입니다. p{ float:left; } float은 띄우다 라는 뜻으로 이것을 사용했을 때 '띄웠다'라고 표현하기도 합니다. left 즉, 왼쪽으로 띄웠으니 오른쪽 공간이 빕니다. 비는 공간으로 내용 부분이 올라오는 것입니다. 아니면 왼쪽으로 붙었다고도 표현할 수 있습니다. 2. 팁 사실 오른쪽에 있는 요소가 inline이었기 때문에 오른쪽에 있는 것이지 block요소였다면 여기에도 float을 줘야 합니다. float이 안 먹었을 때는 이렇게 뒤쪽까지 자리를 차지하게 됩니다. 띄웠다는 것은 레이어 층이 나눠졌다는 말과 같아서 두 요소는 다른 레..

coding/html + css · 2019. 11. 7. 07:30

[css] 배경이미지 넣기

안녕하세요. 플입니다. 오늘은 css로 배경 이미지를 넣어보겠습니다. 1. 배경 이미지 우선 배경으로 사용할 이미지를 저장해줍니다. 저는 키캡 모양을 배경으로 사용할 것입니다. 이때 이미지에 배경 부분을 투명하게 하려면 png로 저장해주셔야 합니다. 2. background p{ background:url('../images/sub1_0.png') no-repeat center center; } background를 이용해 이미지를 배경으로 넣어줍니다. 먼저 url을 입력해 이미지를 불러옵니다. 맨 앞의 ..은 웹에 올렸을 때 해당 도메인이 써질 자리입니다. 뒤쪽 부분은 평소 이미지 주소를 적는 것처럼 입력해주시면 됩니다. 그리고 no-repeat를 이용해 반복이 없는 배경 이미지를 만듭니다. 마지막으로..

coding/html + css · 2019. 11. 6. 18:30

[css] 컨텐츠 가운데 정렬하기

안녕하세요. 플입니다. 오늘은 브라우저 사이즈에 관계없이 컨텐츠를 가운데 정렬해보겠습니다. 1. 가로 사이즈 지정 ul{ width:1280px; } 우선 가로 사이즈를 지정해줍니다. 가로 사이즈는 사이트의 기본 사이즈를 정해둔 것이 있을 겁니다. 그 사이즈로 지정해주세요. 저는 1280px을 주었습니다. 최근에는 와이드 모니터가 늘어서 가로사이즈가 점점 늘어나고 있는 추세입니다. 만드는 웹사이트의 성격에 따라 사이즈가 달라지니 여러 상황을 고려해 사이즈를 정해줍니다. 저는 알아보기 쉽게 border를 넣었습니다. 보기 편하게 border를 지정한 상태로 진행하고 마지막에 제거해주셔도 됩니다. 2. 마진 이용 ul{ margin:0 auto; } 마지막으로 마진을 이용해 가운데 정렬을 해줍니다. 마진 값..

coding/html + css · 2019. 11. 5. 22:30

coding/html + css 101