블로그 꾸미며 배운 HTML/CSS 기록장 📖

 

🚀 블로그 스킨 수정하면서 배운 HTML/CSS 공유합니다!

CSS가 뭔지도 몰랐던 코딩 알못이었는데 블로그 스킨을 어느정도 수정할 정도가 됐다.😅

정식으로 공부한 건 아니고 인터넷을 검색하면서 배운 거라 여전히 검색 없이는 불가능하지만...

그동안 블로그를 꾸미면서 알게된 HTML 태그, CSS 속성 등 각종 이론을 한 곳에 모아봤다.

앞으로도 계속해서 추가할 예정이다.

 

혹시 추가가 필요하거나 잘못된 부분이 있다면 편하게 댓글로 알려주세요! 😊

 

---

 

✅ HTML

📌 ID 선택자

HTML에서 요소를 특정하는 방법에는 크게 ID와 클래스 두 가지가 있다고 한다.

id="main" → 하나의 요소만 가질 수 있다. 즉 고유한 값!

class="box_header" → 여러 개의 요소에서 쓸 수 있다. 즉, 공통 스타일 적용 가능!

 

선택자	CSS 표기법	사용 예시	특징
ID 선택자	#main	id="main"	한 개의 요소에만 적용
class 선택자	box_header	.class="box_header"	여러 개의 요소에 적용 가능

 

 

 

📎 관련글

[Info🔍/HTML&CSS] - [Portfolio 스킨] 08. 블로그 꾸미기 필수템? 상단 프로그레스 바 추가하기

 

 

✅ CSS

📌 box-shadow 속성

box-shadow : 요소의 테두리 안팎으로 그림자를 넣는 속성

 

 

box-shadow: h-offset v-offset blur spread color inset;

 

속성 값	설명	사용 방법
h-offset	그림자의 수평 위치	값이 양수이면 오른쪽, 음수이면 왼쪽으로 이동한다.
v-offset	그림자의 수직 위치	값이 양수이면 아래쪽, 음수이면 위쪽으로 이동한다.
blur	그림자의 흐림 정도	값이 클수록 더 흐려진다.
spread	그림자의 퍼짐 정도	양수일수록 그림자가 퍼지고, 음수일수록 그림자가 좁아진다.
color	그림자의 색상
inset	그림자가 요소의 안쪽으로 그려진다.	생략하면 그림자가 바깥쪽에 그려진다.

 

📌 vertical-align 속성

vertical-align : 요소의 세로 위치를 설정하는 속성

속성 값	설명	사용 방법
baseline	기본값. 텍스트의 기준선에 맞춤	특별한 정렬이 필요 없을 때
top	부모 요소의 가장 위쪽에 정렬	이미지를 글자의 맨 윗부분에 맞출 때
text-top	텍스트의 가장 위쪽에 맞춤
middle	부모 요소의 중간에 맞춤	텍스트 중앙에 맞추고 싶을 때
bottom	부모 요소의 가장 아래쪽에 맞춤	이미지를 글자의 아랫부분에 맞출 때
text-bottom	텍스트의 가장 아래쪽에 맞춤
sub	아래 첨자(subscript) 위치로 이동	수식, 각주 등에 사용하는 위/아래 첨자 위치
super	위 첨자(superscript) 위치로 이동
%	부모 요소 높이의 백분율만큼 위/아래 이동	예: 5% 등 원하는 수치 입력
px, em	특정 거리만큼 위/아래 이동	예: 5px, 5em 등 원하는 수치 입력

 

📌 text-decoration 속성

text-decoration : 텍스트에 밑줄, 취소선, 위줄 등의 효과를 적용하는 속성

속성 값	설명	종류
text-decoration-line	선의 유형 지정	underline, overline, line-through
text-decoration-style	선의 스타일 지정	solid, dashed, dotted, wavy
text-decoration-color	선의 색상 지정
text-decoration-thickness	선의 두께 지정

 

 

📌 스크롤바 속성

📎 관련글

[Info🔍/HTML&CSS] - [Portfolio 스킨] 29. 티스토리 블로그 자동 목차를 더 예쁘게! CSS 디자인 편

 

---

 

HTML과 CSS 처럼 정보성 글이 아니라 리뷰나 잡담은 별별로그 네이버 블로그에 올리고 있습니다.

심심하실 때 놀러오세요😊