반응형
1. CSS로 스타일링하기
1) CSS 소개
: 웹 페이지의 디자인과 스타일을 정의하는 스타일 시트 언어
: 요즘은 가독성과 레이아웃에 중점을 많이 둠
2) CSS 의 기본 구문
h1 { // 선택자
color: blue; // 속성: 값
}- 선택자(Selector)- 꾸미고 싶은 HTML 요소를 선택한다
- 속성(Property) - 꾸미고 싶은 속성명을 입력한다
- 값(Value) - 어떻게 꾸밀지 속성값을 입력한다
3) CSS를 HTML에 적용하는 방법
: HTML와 CSS는 다른 언어이기 때문에, HTML 파일에서 css를 적용하는 코드를 작성해야 한다.
- 인라인 스타일 : HTML 요소의 style 속성을 사용하여 해당 요소에 직접 CSS 스타일을 지정
<h1 style="color: blue; font-size: 24px;">제목</h1>
- 내부 스타일 시트 : HTML 문서 내부에서 <style> 태그를 사용하여 CSS를 작성
<head>
<style>
h1 {
color: blue;
font-size: 24px;
}
</style>
</head>
- 외부 스타일 시트 : CSS 파일을 따로 만들어서 link 로 불러오는 방식, 대부분 이 방식을 사용한다
// style.css
h1 {
color: blue;
}
//index.html
<head>
<link rel="stylesheet" href="style.css">
</head>
4) 식별자(identifier)를 사용하여 CSS를 적용하자
: 식별자(identifier)란, 각 요소(element)를 식별하는데 사용되는 속성(property)
: class 나 id 를 사용해서 특정 요소를 선택하거나 조작할 수 있게 된다
- id 속성 (#사용) - 고유한 식별자, 중복 불가함
- class 속성 (. 사용) - 여러 요소에 같은 클래스 이름 지정 가능
5) CSS 선택자
: 주의) 중복된 속성은 덮어 씌워진다, HTML 에 직접 적용한 게 CSS 보다 우선순위가 높기 때문에 모든 스타일을 CSS 파일에서 적용하는 것을 추천천한다
// style.css
<p>태그 선택자 </p>
<div class="title">클래스 선택자</div>
<div id="unique-id">ID 선택자</div>
<div><p>자식 선택자</p></div>
// index.html
p { // 태그 선택자
font-size: 16px;
}
.title { // 클래스 선택자
font-weight: bold;
}
#unique-id { // ID 선택자
text-decoration: underline;
}
div p { // 자식 선택자
color: red;
}
2. 글꼴과 관련된 CSS 속성
브라우저에서 가장 기본이 되는 폰트 크기는 16px = 1rem
3. CSS 의 Box Model
1) Box Model
- Content: 텍스트나 이미지가 들어있는 실질적인 내용
- Padding: Content와 Border 사이의 영역, 안쪽 여백
- Border: Content를 감싸는 테두리
- Margin: 테두리와 이웃하는 요소 사이의 간격, 바깥 여백
padding: 10px 20px; // 위 아래 여백
padding: 10px 20px 30px 40px; // 위 우 아래 좌 (시계 반대방향) 여백
margin: 10px 20px;
margin: 10px 20px 30px 40px;
기타 속성
- display: 요소의 표시 방법 설정 (block, inline, inline-block 등)
- box-shadow: 그림자 효과 추가
- opacity: 요소의 투명도 조절
- z-index: 요소의 쌓임 순서 조절
4. 레이아웃 배치
1) position
| 값 | 설명 |
| static (기본값) | 기본 문서 흐름에 따라 배치됨 (top, left 등 위치 속성 무시됨) |
| relative | 자기 원래 위치 기준으로 이동 (top, left 등 위치 속성 적용 가능) 자리는 그대로 차지하고, 시각적으로만 이동 |
| absolute | 가장 가까운 relative, absolute, fixed 부모 기준으로 위치 (top, left 등 위치 속성 적용 가능, but static 이면 무시됨) 흐름에서 빠짐 (자리 차지 안 함) |
| fixed | 브라우저 창 기준으로 위치 고정 (스크롤해도 위치 변하지 않음) 주로 상단 고정 메뉴, 플로팅 버튼 등에 사용 |
| sticky | 스크롤 위치에 따라 static → fixed로 전환 기준 위치에 도달하면 고정(fixed)처럼 행동 스크롤 시 상단에 고정되는 네비게이션 바 등에 사용 |
2) flexbox vs grid
| 항목 | Flexbox | Grid |
| 주 용도 | 1차원(가로 또는 세로) 정렬 | 2차원(가로+세로) 레이아웃 구성 |
| 축 기준 | main-axis, cross-axis로 정렬 | 행(Row)과 열(Column)로 영역을 나눔 |
| 제어 단위 | 아이템(자식 요소) 중심 정렬, 단순한 가로/세로 정렬 | 영역(셀) 중심 배치 |
| 대표 속성 | display: flex; flex-direction, justify-content, align-items, flex-wrap |
display: grid; grid-template-columns/rows, grid-column/row, gap |
| 레이아웃 복잡도 | 단순하거나 유동적인 구조에 적합 - 아이템 수가 유동적인 경우 | 복잡하고 정적인 레이아웃에 적합 - 카드격자/대시보드 등 |
- table 태그는 반응형에 잘 반응하지 않아서 grid 를 많이 씀
- flex 로 묶어서 그 사이에 gap 을 주면 빠르고 편하게 구현이 가능함
but 서로 높이가 다른 경우 정렬이 맞이 않을 수 있는데, 이 때 align-item 쓰면 세로축정렬 됨 ! - Grid 를 써야 하는 경우는 빈 칸이 있을 때 ! - 3*3 배열에서 item 이 8개인 경우 마지막 줄에 칸이 남음, 근데 그 자리를 채워줌 !
- 강사님께서는 flex 가 좀 더 편하다고 생각하신다고 함
[실습] HTML + CSS 적용
반응형
'Education > 신한투자증권 프로 디지털 아카데미' 카테고리의 다른 글
| [신한투자증권 프로디지털 아카데미] 실무형 웹페이지 실습(1) - 포트폴리오 만들기 (1) | 2025.05.25 |
|---|---|
| [신한투자증권 프로 디지털 아카데미] UI/UX 디자인과 구현(3) (HTML/CSS) (0) | 2025.05.25 |
| [신한투자증권 프로 디지털 아카데미] UI/UX 디자인과 구현(1) (HTML/CSS) (5) | 2025.05.25 |
| [신한투자증권 프로 디지털 아카데미] 클라우드 기반 웹/앱 개발을 위한 서비스 기획 이해(3) (0) | 2025.05.22 |
| [신한투자증권 프로 디지털 아카데미] 클라우드 기반 웹/앱 개발을 위한 서비스 기획 이해(2) (0) | 2025.05.22 |