☑️CSS
Cascade Style Sheet
기능 : 문서에 스타일을 지정하는 언어
✅ 적용 우선순위
- inline 방식
- internal 방식
- external 방식
☑️ 지정방식
✅ inline
- HTML 태그의 내부에 style 속성으로 스타일을 지정
- 우선순위가 가장 높은 방식(기존 css 속성을 덮어쓰기)
- !important : 우선순위 조정가능. 사용 자제
<body>
<h1>반갑습니다. 홍길동</h1>
<h1 style="color: red;">Hello World</h1> <!-- 초록색 출력하기 -->
</body>
✅ internal
- <heade> 태그 내부에 <style> 태그를 추가 방식
<html lang="ko">
<head>
<title>internal css</title>
<style>
h1{color: red;}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
✅ external : 별도의 .css 파일을 <link> 태그로 스타일 지정
<html lang="ko">
<head>
<title>external css</title>
<link rel="stylesheet" href="ex02_external.css">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
☑️ font 관련 css
p{
font-family: '맑은고딕', sans-serif; /* '맑은 고딕'이 없으면 고딕 계열(sans-serif)을 사용한다.*/
font-family: '궁서', serif; /* '궁서'가 없으면 명조 계열(serif)을 사용하시오 */
font-size: 32px; /* 디폴트 16px */
font-weight: 900; /* 디폴트 400, 100 ~ 900 */
font-style: italic; /* italic : 기울임, none : 기울임 없애기 */
/* 블록요소는 정렬이 된다. */
text-align: center; /* 텍스트 정렬 : left, right, center, justify*/
text-decoration: underline; /* underline : 밑줄, line-through : 취소선, none : 선 없애기*/
text-shadow: 5px 5px 1px rgb(229, 255, 81); /* 그림자 : x크기 y크기 blur 색상*/
}
pre {
line-height: 32px; /* 행 높이 : 세로 가운데 정렬에서 주로 활용 */
letter-spacing: -1px; /* 글자 간격 */
/* Red Green Blue : 0~255, 0~255, 0~255*/
color: rgb(0, 0, 0); /* 검정색 */
color: rgb(255, 255, 255); /* 흰색 */
/* RGB : #RRGGBB 16진수 표기법 */
color: #000000; /* 검정색 */
color: #FFFFFF; /* 흰색 */
color: rgba(0, 0, 0, 0.5); /* alpha(투명도) : 0(투명) ~ 1(불투명) */
}
h1 {
/*
브라우저 별로 글자의 외각선 효과 처리 표준화 추진중
벤터 프리픽스(vender Prefix) : 속성 앞에 브라우저 표현
1) -webkit- : 크롬, 사파리
2) -moz- : 파이어폭스
3) -o- : 오페라
*/
-webkit-text-stroke-color: crimson;
-webkit-text-stroke-width: 1px;
}
a{text-align: center;} /* 인라인태그는 정렬 안됨*/
✅ Google font 적용
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
h1 {font-family: 'Noto Sans KR', sans-serif;}
</style>
✅ Fontawesome
1. 무료(유료) 아이콘을 제공하는 사이트이다.
2. 아이콘을 CDN의 형태로 제공 받아서 사용한다.
- fontawesome에서 개인 이메일을 입력하면 CDN을 제공해 준다.
- CDN 제공 사이트를 통해서 fontawesome의 CDN을 알아낸다.
*CDN
1. Content Delivery Network
2. 웹 상에서 제공받는 각종 콘텐츠를 의미한다.
3. CDN 제공 사이트
cdnjs - The #1 free and open source CDN built to make life easier for developers
Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it faster and easier to load library fil
cdnjs.com
<head>
<title>Document</title>
<!--
fontawesome CDN 가져오기
1. <link> 태그
2. @import url()
-->
<!-- 1. <link> 태그 -->
<!--
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-->
<!-- 2. @import url() -->
<style>
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css');
</style>
</head>
<body>
<!-- 아이콘 : fontawesome에서 <i> 태그로 제공된다. -->
<p>
휴지통 <i class="fa-solid fa-trash "></i>
</p>
<p>
<button>
<i class="fa-brands fa-searchengin"></i>
</button>
</p>
<p>
<a href="https://twitter.com/i/flow/login">
<i class="fa-brands fa-twitter"></i>
</a>
</p>
<p>
<i class="fa-regular fa-envelope"></i>
<i class="fa-regular fa-envelope fa-2x"></i>
<i class="fa-regular fa-envelope fa-3x"></i>
<i class="fa-regular fa-envelope fa-4x"></i>
<i class="fa-regular fa-envelope fa-5x"></i>
</p>
</body>
☑️ class 속성
1. 전역속성 : 모든 태그에 설정 가능함
2. 같은 스타일 가진 경우 같은 class 속성을 설정
3. 하나의 태그는 여러 class 속성을가질 수 있다. 공백으로 구분함
4. style에서 class 속성의 선택자는 .이다 ( .클래스 속성의값)
<style>
.red_text{color: #ff0000;}
.big_text{font-size: 32px;}
</style>
<!-- class 속성의 값은 하나 이상의 값이 가능함
class = "red_text big_text" 태그는 red_text 값과 big_text 값을 2개 가진다.
class = "red_text" 태그는 red_text 값을 1개 가진다.
id 속성은 한개의 값만 가능함.
HTML의 태그의 속성의 이름은 유일해야 함.
<T a="1" b="2" a="3"> => 오류 -->
<p class="red_text big_text">Hello World</p>
<p class="red_text">Nice to meet you</p>
<p>일반적인 p태그</p>PS. 잘 사용하지 않았던 CSS 속성까지 알게되는 기회이다.
'HTML_CSS' 카테고리의 다른 글
| [BCGD] 비전공자 백엔드 개발 도전기 (31) (0) | 2025.03.18 |
|---|---|
| [BCGD] 비전공자 백엔드 개발 도전기 (30) (0) | 2025.03.18 |
| [BCGD] 비전공자 백엔드 개발 도전기 (28) (5) | 2025.03.17 |