개요
오늘은 CSS를 처음 배울 싸피 친구들을 위해 초간단 요약본을 준비해보았습니다.
교육과정에 CSS가 있긴 하지만, 처음 배우는 친구들은 짧은 시간에 지나가는 수업만 듣고 코딩하기는 많이 어려우실거에요.
미리 한번 훑고 수업을 들으면 더 좋을겁니다!
이 글 내용을 외우지 못하더라도 과제를 할 때 검색하며 할 수 있으실겁니다.
CSS 겁내지 말아요!
CCS란 무엇인가요?
정의
CSS (Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 정의하는 언어입니다. HTML은 웹 페이지의 구조와 내용을 정의하는 반면, CSS는 그 내용이 어떻게 보여질지를 정의합니다.
간단히 말해, CSS는 스타일을 지정하여 웹 페이지를 아름답게 꾸미기 위해 사용됩니다.
CSS의 작동 방식
CSS는 선택자와 선언 블록으로 구성됩니다. 선택자는 스타일을 적용하려는 HTML 요소를 지정하고, 선언 블록은 해당 요소에 적용할 스타일을 정의합니다.
p {
color: blue;
font-size: 16px;
}여기서 p는 선택자로, 웹 페이지의 모든 <p> 요소에 스타일을 적용하겠다는 것을 의미합니다. 중괄호 {} 안의 내용은 선언 블록으로, 실제로 적용할 스타일을 정의합니다.
CSS 적용 방법
1. 인라인 스타일
HTML 요소 내부에 직접 스타일을 적용합니다.
<html>
<head>
</head>
<body>
<p style="color: red;">This is a red text.</p>
</body>
</html>
2. 내부 스타일시트
HTML 문서의 <head> 섹션에 <style> 태그를 사용하여 스타일을 정의합니다.
<html>
<head>
<style>
p {
color: green;
}
</style>
</head>
<body>
<p>hello, world</p>
</body>
<html>
3. 외부 스타일시트 👍 (Best!! )
별도의 .css 파일을 생성하고, HTML 문서에 <link> 태그를 사용하여 연결합니다.
href에는 적용할 CSS파일의 경로를 작성하면 됩니다.
여러개의 CSS를 적용했는데 충돌난 경우, 가장 뒤에 적용된 CSS파일에 있는 값이 적용됩니다.
이 방식이 성능, 유지보수성 등 모든 방면에서 좋기 때문에 대부분의 개발자들은 이 방식을 사용합니다.
조금 귀찮을 수 있더라도 꼭 이 방식으로 CSS를 적용해주세요.
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
CSS 기본 문법
CSS는 주로 선택자와 선언 블록으로 구성되며, 이 두 요소를 통해 웹 페이지의 요소에 스타일을 적용합니다.
1. 선택자 (Selector)
선택자는 스타일을 적용하고자 하는 HTML 요소를 지정합니다. 예를 들어, 모든 <p> 태그에 스타일을 적용하려면 p를 선택자로 사용합니다.
- 요소 선택자
- 태그 이름 {}
- 클래스 선택자
- .클래스이름 {}
- 아이디 선택자
- #클래스 이름 {}
- 자손 선택자
- 부모요소 자식요소 {}
- 부모요소 내부의 다른 요소들을 대상으로 합니다.
- ex) main p { color : red;}
- <main> 요소 내부의 모든 <p> 요소의 텍스트 색이 붉게 변합니다.
- 자식 선택자
- 부모요소 > 자식요소 {}
- 부모요소의 직접적인 자식만을 대상으로 합니다.
-
- ex) main > p { color : red;}
- <main> 요소 바로 아래의 <p> 요소만 텍스트 색이 붉게 변합니다.
- main > div > p구조의 p 는 텍스트 색이 변하지 않습니다.
- ex) main > p { color : red;}
2. 선언 블록 (Declaration Block)
선언 블록은 중괄호 {}로 둘러싸인 영역으로, 선택자에 적용할 스타일을 포함합니다. 선언 블록 내부에는 하나 이상의 선언이 포함될 수 있습니다.
3. 선언 (Declaration)
선언은 속성과 값으로 구성되며, 속성과 값은 콜록 : 으로 구분됩니다. 선언의 끝에는 세미콜론(;)을 붙여줍니다.
- 속성 (Property) : 스타일의 종류를 나타내는 부분입니다. 예를 들어, 텍스트의 색상을 변경하려면 color 속성을 사용합니다.
- 값 (Value) : 해당 속성에 적용할 구체적인 스타일을 나타냅니다. 예를 들어, color 속성의 값으로 blue를 사용하면 텍스트의 색상이 빨간색으로 변경됩니다.
p {
color : blue;
}기본 스타일링
색상 (color, background-color)
color
text의 색상을 설정합니다.
background-color
요소의 배경색을 설정합니다.
button {
color: red; /* 버튼 속 텍스트 색상 */
background-color: blue; /* 버튼의 배경 색상 */
}폰트 (Font)
font-family
- 텍스트의 폰트를 설정합니다.
- font family는 보통 여러개를 등록하여, 앞에서부터 브라우저가 적용할 수 있는 폰트를 적용합니다. 앞에 잇는 폰트를 적용할 수 없는 경우 그 뒤의 폰트를 적용합니다.
font-size
- 폰트의 크기를 설정합니다.
- px, rem, em 등의 단위를 사용하여 rem과 em이 더 권장됩니다.
font-weight
- 폰트의 굵기를 설정합니다.
- nomal, bold, 100, 200, 300, 400, 500, 600, 700 등이 있습니다.
font-style
- font의 스타일을 설정합니다.
- italic ( 기울게 )과 normal ( 기본 스타일) 을 가장 많이 사용합니다.
body {
font-family : Arial, sans-serif;/* 폰트 */
font-size : 1rem; /* 크기 */
font-weight: bold; /* 굵기 */
font-style : italic; /* 스타일 */
}
텍스트 스타일링 (Text Styling)
text-align : 정렬
- center : 가운데 정렬
- left : 좌측 정렬
- right : 우측 정렬
text-decoration : 텍스트에 선 긋기
- underline : 밑줄
- none : 안그음
- line-throught : 글자 중간에 선 긋기
- overline : 글자 위에 선 긋기
text-transform : 대, 소문자 변환
- capitalize : 단어의 첫번째 글자만 대문자로 변환
- uppercase : 모든 글자를 대문자로 변환
- lowercase : 모든 글자를 소문자로 변환
- none : 입력 그대로 출력
line-height : 줄 간격
- 숫자나 %로 설정합니다.
- 숫자로 설정하는 경우, 몇 배로 할 것인지 생각하면 됩니다.
- 예를 들어 1.5라면 글자 크기의 1.5배가 줄 높이 입니다.
- %로 설정하는 경우 글자크기의 몇 %가 줄 높이일 지 정하면 됩니다.
letter-spacing : 글자 간격
- 글자간의 간격을 정합니다. 보통 px, em, rem 등의 단위를 사용합니다.
h1 {
text-align: center; /* 정렬 */
text-decoration: underline; /* 장식 */
text-transform: uppercase; /* 대문자 변환 */
line-height: 1.5; /* 줄 간격 */
letter-spacing: 2px; /* 글자 간격 */
word-spacing: 4px; /* 단어 간격 */
}박스 모델 관련 스타일링
content
- 요소의 실제 내용을 포함하는 영역
- css에서 width와 height 속성은 이 영역의 크기를 결정합니다.
- width를 100%로 했는데 padding, border, margin이 있다면 스크롤이 생기거나 넘치는 등 문제가 있습니다. 의문의 스크롤이 생기는 가장 큰 이유입니다.
Padding
- 내용을 감싸는 여백입니다.
- 아래 사진처럼 Card같은 컴포넌트는 내부의 내용이 border에 딱 붙지 않도록 보통 padding을 설정합니다.
- padding은 보통 5~10%를 설정합니다.
Border
- padding 바깥쪽의 테두리 입니다.
- 보통 border를 안하거나, 1px로 얇게 하는 것이 보통입니다.
- 모서리를 둥글게 하고 싶다면 border-radius를 사용합니다.
- border 설정 방법
- border-width, border color 등으로 다 따로 설정할 수 있지만 border : 굵기 스타일 색상 ; 으로 한번에 설정이 가능합니다.
- 가장 많이 사용하는 예제 : border : 1px solid black;
Margin
- 박스 외부의 여백입니다. 다은 요소와 떨어뜨릴 때 사용합니다.
- margin : auto를 사용하면 자동으로 자동 정렬이 되지만, 고정크기로 width나 height를 지정해야합니다.
레이아웃
Display
display 속성은 요소가 화면에 어떻게 표시되는지를 결정합니다.
- block: 요소가 전체 너비를 차지하며, 위아래로 줄바꿈이 발생합니다. 예: <div>, <p>
- inline: 요소가 내용의 너비만큼 차지하며, 줄바꿈 없이 다른 인라인 요소나 텍스트와 함께 한 줄에 나타납니다. 예: <span>, <a>
- inline-block: 인라인 요소처럼 한 줄에 표시되지만, 블록 요소처럼 너비와 높이를 지정할 수 있습니다.
- none: 요소가 화면에 표시되지 않습니다.
See the Pen Untitled by 정서희 (@LireEruel) on CodePen.
position
position 속성은 요소의 배치 방식을 결정합니다.
- static: 기본 배치. 다른 position 값이 지정되지 않은 요소는 static으로 처리됩니다.
- relative: 원래 위치를 기준으로 상대적으로 이동합니다.
- absolute: 가장 가까운 상위 요소 (position이 static이 아닌 요소)를 기준으로 절대 위치를 지정합니다.
- fixed:
- 브라우저 창을 기준으로 고정된 위치에 배치됩니다.
- scroll해도 여전히 고정됩니다. 게시글의 스크롤을 내렸을 때 가장 위로 올라가기 버튼 등에 사용됩니다.
- sticky: 스크롤에 따라 상대적 또는 고정 위치 사이에서 전환됩니다.
- 스크롤했을 때에도 사라지지않도록 header와 nav 등에 자주 사용됩니다.
- 사용방법
- 고정될 요소에 position: sticky; 적용
- 위치를 지정한다. 만약 맨 위에 고정할 것이라면 top:0 사용
- 부모 요소의 크기가 자식 요소보다 작으면 작동하지 않으므로 부모 요소의 크기 설정
- z-index를 활용하여 다른 요소에게 가려지지 않도록 조절
Flexbox
Flexbox (Flexible Box)는 1차원 레이아웃 모델로, 주로 복잡한 레이아웃과 정렬 문제를 해결하기 위해 사용됩니다. Flexbox는 컨테이너와 아이템 간의 공간 배분과 정렬을 유연하게 제어할 수 있게 해줍니다.
기본 개념
Flex Container (플렉스 컨테이너): Flexbox 레이아웃을 적용할 부모 요소입니다.
Flex Items (플렉스 아이템): 플렉스 컨테이너 내의 자식 요소들입니다.
Flex Container에 적용되는 속성 중 많이 사용되는 속성들:
1. display: 플렉스 컨테이너를 정의합니다.
- flex (블록 레벨 플렉스 컨테이너)
- inline-flex (인라인 레벨 플렉스 컨테이너)
2. flex-direction: 주 축 (main axis)의 방향을 설정합니다.
- row (기본값) (가로)
- column (세로)
3. flex-wrap: 플렉스 아이템들이 여러 줄로 래핑될지 결정합니다.
- nowrap (기본값)
- wrap
4. flex-flow: flex-direction과 flex-wrap의 단축 속성입니다.
5. justify-content: 주 축에서 아이템들을 어떻게 정렬할지 결정합니다.
- flex-start (앞에 붙이기)
- flex-end (뒤에 붙이기)
- center (가운데 정렬)
- space-between (최대한 띄우기)
- space-around (적당히 띄우기)
- space-evenly (적당히 띄우기)
6. align-items: 교차 축 (cross axis)에서 아이템들을 어떻게 정렬할지 결정합니다.
- flex-start (앞에 붙이기)
- flex-end (뒤에 붙이기)
- center (가운데 정렬)
CSS Flex는 배우기가 쉽지 않습니다...
아래 링크가 가장 잘 설명되어있으니 꼭 참고해주세요.
https://studiomeal.com/archives/533
CSS 화이팅!
'Study > CSS' 카테고리의 다른 글
| 아직도 CSS 쓰세요? 이제 SASS 씁시다! (3) | 2023.10.28 |
|---|---|
| CSS transitions options (0) | 2023.08.27 |
