1. CSS (Cascading Style Sheets)
CSS는 HTML 요소에 스타일을 적용하여 웹 페이지의 시각적 표현을 향상시키는 데 사용된다.
이를 통해 개발자는 내용과 디자인을 분리할 수 있으며, 웹 사이트의 유지 관리를 용이하게 만든다.
💡 CSS 적용하는 세 가지 주요 방법
- Inline Style
HTML 태그 내에 style 속성을 사용하여 직접 스타일을 적용한다. - Internal Style Sheet
<style> 태그를 사용하여 HTML 문서 내에 스타일 시트를 포함시킨다. - External Style Sheet
별도의 CSS 파일을 만들고 HTML 문서에서 파일을 링크한다.
💻 예시 코드
1️⃣ Inline Style
<p style="color: blue;">이 텍스트는 파란색이다.</p>
2️⃣ Internal Style Sheet
<head>
<style>
p { color: red; }
</style>
</head>
<body>
<p>이 텍스트는 빨간색이다.</p>
</body>
3️⃣ External Style Sheet
<link rel="stylesheet" type="text/css" href="styles.css">p {
color: green;
}
CSS 란 무엇인가? - Web 개발 학습하기 | MDN
CSS (Cascading Style Sheets) 를 사용하면 멋진 웹 페이지를 만들 수 있지만, 어떻게 작동할까요? 이 기사에서는 간단한 구문 예제를 통해 CSS가 무엇인지 설명하고 CSS에 대한 몇 가지 주요 용어를 다룹
developer.mozilla.org
- 출처 : developer.mozilla
CSS란 무엇인가?
안녕하세요 김자까입니다! 오늘은 CSS에 대해서 알아보겠습니다. 자! 따라오시죠! 우선 CSS를 알기위...
blog.naver.com
- 출처 : 자까의 소소한 블로그
2. CSS 선택자
CSS 선택자는 스타일을 적용할 HTML 요소를 지정하는 데 사용된다. CSS 선택자의 종류는 매우 다양하며, 단순한 요소 이름부터 속성 값, 특정 상태에 있는 요소까지 다양하게 지정할 수 있다.
1️⃣ 기본 선택자
1. 전체 선택자 *
모든 요소에 스타일을 적용한다.
* {
margin: 0;
padding: 0;
}
2. 요소 선택자
특정 HTML 요소에 스타일을 적용한다.
p {
color: blue;
}
3. 클래스 선택자 .class
특정 클래스가 적용된 모든 요소에 스타일을 적용한다.
.menu {
background-color: yellow;
}
4. id 선택자 #id
특정 ID를 가진 요소에 스타일을 적용한다.
#header {
background-color: gray;
}
2️⃣ 결합 선택자
1. 자손 선택자 A B
A 요소 내부에 있는 B 요소 모두를 선택한다.
div p {
color: red;
}
2. 자식 선택자 A > B
A 요소의 직접적인 자식인 B 요소만을 선택한다.
ul > li {
border: 1px solid black;
}
3. 인접 형제 선택자 A + B
A 요소 바로 뒤에 있는 형제 요소 B 하나만을 선택한다.
h1 + p {
font-size: 18px;
}
4. 일반 형제 선택자 A ~ B
A 요소 뒤에 있는 B 요소 모두를 선택한다.
h1 ~ p {
color: green;
}
3️⃣ 속성 선택자
1. 속성 존재 선택자 [attr]
특정 속성을 가진 요소를 선택한다.
[disabled] {
color: grey;
}
2. 속성 값 선택자 [attr=value]
특정 속성을 특정 값으로 가진 요소를 선택한다.
[type="text"] {
background-color: lightblue;
}
4️⃣ 의사 클래스 및 의사 요소
1. 의사 클래스 :pseudo-class
요소의 특정 상태에 스타일을 적용한다.
(ex : :hover, :focus)
a:hover {
color: red;
}
2. 의사 요소 ::pseudo-element
요소의 특정 부분에 스타일을 적용한다.
(ex : ::first-letter, ::before)
p::first-letter {
font-size: 200%;
}3. 선택자, class선택자 추가 정리
1️⃣ id선택자
id 선택자는 문서 내에서 고유해야 하는 식별자이다.
각 id 값은 한 HTML 문서 내에서 단 한 번만 사용되어야 하며, 주로 특정 요소에 고유한 스타일을 적용하거나
JavaScript에서 요소를 찾기 위해 사용된다.
💡 CSS에서 id 사용하기
id는 CSS에서 # 기호를 사용하여 참조한다.
💻 id선택자 예시 코드(HTML, CSS)
<div id="uniqueElement">이것은 id로 스타일이 적용된 요소이다.</div>#uniqueElement {
color: red;
font-size: 20px;
}2️⃣ class선택자
class 선택자는 여러 요소에 동일한 스타일을 적용하고자 할 때 사용된다.
하나의 요소에 여러 클래스를 적용할 수 있으며, 한 클래스를 여러 요소에 걸쳐 사용할 수도 있다.
💡 CSS에서 class 사용하기
class는 CSS에서 . 기호를 사용하여 참조한다.
💻 class선택자 예시 코드(HTML, CSS)
<div class="stylish">첫 번째 요소</div>
<div class="stylish">두 번째 요소</div>.stylish {
color: blue;
font-size: 18px;
}
CSS의 선택자(selector) 종류 14가지
선택자(selector) ·선택자란 CSS로 UI 의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다. ·선택자의 종류는 type선택자, id선택자, class선택자, 전체선택자, 하위선택자, 자식선택자
coding23213.tistory.com
- 출처 : coding23213
4. Dynamic selector
CSS에서 동적 선택자(Dynamic Selector)는 요소의 상태에 따라 스타일을 적용하는 의사 클래스이다.
이 선택자들은 사용자와의 상호작용이나 요소의 상태 변화에 따라 스타일을 동적으로 변경할 수 있게 해 준다.
💡 일반적인 동적 선택자들
1️⃣ :hover
사용자가 요소 위에 마우스를 올렸을 때 적용된다.
a:hover {
color: red;
}
2️⃣ :focus
요소가 포커스를 받았을 때 적용된다. (ex) 입력 필드 클릭 시)
input:focus {
border-color: blue;
}
3️⃣ :active
요소를 클릭하는 동안 적용된다.
button:active {
position: relative;
top: 2px;
}
4️⃣ :checked
체크박스나 라디오 버튼이 선택됐을 때 적용된다.
input[type="checkbox"]:checked {
background-color: blue;
}
5️⃣ :disabled
요소가 비활성화 상태일 때 적용된다.
input:disabled {
background-color: grey;
}5. Layout
CSS에서 레이아웃은 웹 페이지의 구조를 설계하는 방법이다.
여러 CSS 속성과 기법을 사용하여 요소들의 위치와 크기를 조절하고, 웹 페이지의 전체적인 레이아웃을 구성할 수 있다.
💡 주요 CSS 레이아웃 기법들
1️⃣ Flexbox
일차원 레이아웃 모델로, 주로 요소들을 행이나 열로 효과적으로 정렬할 때 사용된다.
.container {
display: flex;
justify-content: space-between; /* 요소들 사이의 간격을 균등하게 분배 */
align-items: center; /* 세로축을 중심으로 중앙 정렬 */
}
2️⃣ Grid
이차원 레이아웃 모델로, 행과 열을 기반으로 복잡한 레이아웃을 설계할 수 있다.
.grid-container {
display: grid;
grid-template-columns: auto auto auto; /* 세 열의 크기를 자동으로 조절 */
gap: 10px; /* 셀 사이의 간격 */
}
3️⃣ Positioning
요소들의 위치를 직접 조정할 때 사용한다.
position 속성을 사용하여 절대적, 상대적, 고정적 또는 스티키(sticky) 위치를 지정할 수 있다.
.sticky-element {
position: sticky;
top: 10px; /* 스크롤을 해도 페이지의 상단에서 10px 아래에 고정 */
}
4️⃣ Multicolumn Layout
여러 컬럼을 만들어 텍스트나 콘텐츠를 신문처럼 나눌 수 있다.
.newspaper {
column-count: 3;
column-gap: 20px;
}
[HTML] 10. 공간 분할 태그 ( div, span, table ...)
🟡 1. 웹페이지 공간 분할 - 지금까지 HTML을 공부한 이유는 웹사이트를 만들기 위해서 공부를 했는데, 웹사이트를 잘 만들기 위해서는 초반 설계부터 잘해야 차후에 수정할 일이 많이 안 생깁니
daily-life-of-bigone.tistory.com
- 출처 : daily-life-of-bigone
[CSS] 레이아웃 만들기
🎓 페이지 레이아웃 HTML의 구성 html은 기본적으로 왼쪽에서 오른쪽, 위에서 아래로 컨텐츠를 배치한다. 따라서 css에서도 수직 분할과 수평 분할을 차례대로 적용하면서 작업을 진행한다. 따라
romcanrom.tistory.com
- 출처 : romcanrom
'에이콘아카데미 회고 > 5회차) 자바기반 풀스택 개발자 양성과정' 카테고리의 다른 글
| JS) 33번째 회고 (0) | 2024.05.17 |
|---|---|
| JS) 32번째 회고 (0) | 2024.05.16 |
| HTML) 30번째 회고 (0) | 2024.05.13 |
| JAVA, HTML) 29번째 회고 (2) | 2024.05.10 |
| JAVA) 28번째 회고 (0) | 2024.05.09 |
