하위 태스크 1
CSS 선택자 학습
태그, 클래스, ID, 그룹 선택자의 사용법과 차이 이해
- 태그: 태그는 마크업 안에서 요소의 시작과 끝을 구분짓는 구문이다. 태그 선택자는 문서에서 지정된 태그를 사용한 모든 요소를 선택한다.
- 클래스: 클래스는 요소의
class특성에 부여되는 이름이다. 클래스 선택자는 지정된 클래스가 있는 요소를 모두 선택한다. - ID: ID는 요소의
id특성에 부여되는 이름이다. ID 선택자는 동일한id를 가진 요소를 선택한다. - 그룹 선택자: 동일한 스타일을 사용하는 선택자를 한 번에 선택할 수 있다. 쉼표로 구분해 여러 선택자를 열거한다.
/* 태그 선택자 */
p {
font-size: 14px;
}
/* 클래스 선택자 */
.bold-text {
font-weight: 700;
}
/* ID 선택자 */
#title {
font-size: 20px;
font-weight: 900;
}
/* 그룹 선택자 */
h2, p {
margin-top: 20px;
}하위 태스크 2
캐스케이딩 원칙 이해
상속, 우선순위, 명시도의 개념과 적용 방법 학습
- 상속: 자식 요소에서 스타일을 설정하지 않으면, 부모 요소의 스타일이 상속된다.
- 우선순위: 부모 요소에서 상속된 스타일과 자식 요소에서 정의된 스타일이 충돌하면 중요도, 명시도, 소스 순서에 따라 우선 순위가 결정된다.
- 명시도: 선택자의 구체적인 정도를 수치로 나타낸 값이다. 명시도가 높을수록 스타일 적용 우선 순위가 높다.
<!doctype html>
<html>
<head>
<style>
/* 상속 예시: color 속성은 자식에게 상속된다. 따라서 body 요소의 자식인 h1,
h2, p의 텍스트 색상은 brown으로 렌더링된다.*/
body {
color: brown;
}
/* 명시도 및 우선 순위 예시: p 선택자의 명시도는 (0, 0, 1)로 body 선택자와
같다. 명시도가 같을 경우 나중에 선언한 스타일의 우선 순위가 높다. 따라서
<p> 태그로 감싼 내용의 텍스트 색상은 coral이 된다. */
p {
color: coral;
}
</style>
</head>
<body>
<h1>하위 태스크 2</h1>
<h2>상속</h2>
<p>부모 요소의 일부 스타일 속성은 자식 요소에게 상속됩니다.</p>
<h3>우선 순위</h3>
<p>
요소에 적용되는 스타일은 우선 순위에 의해 결정됩니다. 우선 순위는 중요도,
명시도, 소스 순서에 영향을 받습니다.
</p>
<h2>명시도</h2>
<p>선택자의 구체적인 정도가 높을수록 명시도가 높습니다.</p>
</body>
</html>
하위 태스크 3
CSS 적용 방법 비교
인라인, 내부, 외부 스타일시트의 차이와 장단점 이해
인라인 스타일: 스타일을 적용할 요소의 style 특성에 스타일을 정의한다.
<p style="color: red">...</p>내부 스타일시트: CSS 스타일을 HTML 문서에 정의한다.
<!doctype html>
<html>
<head>
<style>
body {
color: blue;
}
</style>
</head>
<body></body>
</html>외부 스타일시트: 여러 HTML 문서에서 사용할 스타일을 별도의 파일로 저장한다. 이후 필요할 때마다 파일을 불러와서 사용한다.
/* style.css */
body {
background-color: yellow;
}<!-- index.html -->
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body></body>
</html>하위 태스크 4 ~ 5
글꼴 속성 적용
font-family,font-size,font-weight등 글꼴 속성 사용
웹 폰트 적용
Google Fonts 등 웹 폰트 서비스를 활용한 폰트 적용
<!doctype html>
<html>
<head>
<style>
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap");
p {
font-family: Jost;
font-size: 3rem;
font-style: italic;
font-weight: 700;
}
</style>
</head>
<body>
<p>Jost is awesome font.</p>
</body>
</html>
하위 태스크 6
텍스트 스타일 적용
text-align,text-decoration,line-height등 텍스트 스타일 사용
<!doctype html>
<html>
<head>
<style>
.loose-lh {
line-height: 0.6;
}
.dense-lh {
line-height: 2;
}
.right-ta {
text-align: right;
}
.left-ta {
text-align: left;
}
.center-ta {
text-align: center;
}
.underline-td {
text-decoration: underline;
}
</style>
</head>
<body>
<p>
유구한 역사와 전통에 빛나는 우리 대한국민은 3ㆍ1운동으로 건립된
대한민국임시정부의 법통과 불의에 항거한 4ㆍ19민주이념을 계승하고,
</p>
<p class="right-ta">
조국의 민주개혁과 평화적 통일의 사명에 입각하여 정의ㆍ인도와
동포애로써 민족의 단결을 공고히 하고,
</p>
<p class="center-ta">모든 사회적 폐습과 불의를 타파하며,</p>
<p class="left-ta">
자율과 조화를 바탕으로 자유민주적 기본질서를 더욱 확고히 하여
정치ㆍ경제ㆍ사회ㆍ문화의 모든 영역에 있어서 각인의 기회를 균등히
하고, 능력을 최고도로 발휘하게 하며,
</p>
<p class="underline-td">
자유와 권리에 따르는 책임과 의무를 완수하게 하여,
</p>
<p class="loose-lh">
안으로는 국민생활의 균등한 향상을 기하고 밖으로는 항구적인
세계평화와 인류공영에 이바지함으로써 우리들과 우리들의 자손의 안전과
자유와 행복을 영원히 확보할 것을 다짐하면서
</p>
<p class="dense-lh">
1948년 7월 12일에 제정되고 8차에 걸쳐 개정된 헌법을 이제 국회의
의결을 거쳐 국민투표에 의하여 개정한다.
</p>
</body>
</html>
하위 태스크 7
색상 표현 방법 학습
키워드, HEX, RGB, RGBA 등 색상 표현 방법 이해
- 키워드: 웹 안전 색상의 이름으로 색상을 지정한다. 웹 안전 색상은 기본 색상 16가지를 포함해 모두 216가지가 있다.
- HEX:
#기호와 함께 6자리의 16진수로 색상을 지정한다. - RGB:
rgb(152, 94, 2)와 같이 적색, 녹색, 청색의 수치로 색상을 지정한다. - RGBA: RGB 표기법에 투명도를 조절하는 알파 값을 추가하여 색상을 지정한다.
rgba(152, 94, 2, 0.4)와 같다.
<!doctype html>
<html>
<head>
<style>
.color-name-notation {
color: blueviolet;
}
.hex-notation {
color: #d67272;
}
.rgb-notation {
color: rgb(0, 255, 0);
}
.rgba-notation {
color: rgba(201, 237, 4, 0.6);
}
</style>
</head>
<body>
<p class="color-name-notation">색상 이름 표기법</p>
<p class="hex-notation">16진수 표기법</p>
<p class="rgb-notation">RGB 표기법</p>
<p class="rgba-notation">RGBA 표기법</p>
</body>
</html>
하위 태스크 8
배경 속성 적용
background-color,background-image,background-position등 배경 속성 사용
<!doctype html>
<html>
<head>
<style>
.wallpapaer {
background-image: url("./images/bottom-bg.jpg");
background-repeat: no-repeat;
background-position: left -110px;
}
.p1 {
background-color: antiquewhite;
}
.p2 {
background-color: aqua;
}
.p3 {
background-color: blueviolet;
}
</style>
</head>
<body>
<main class="wallpapaer">
<p class="p1">antiquewhite</p>
<p class="p2">aqua</p>
<p class="p3">blueviolet</p>
</main>
</body>
</html>
하위 태스크 9
그라디언트 적용
linear-gradient,radial-gradient를 사용한 배경 효과 구현
<!doctype html>
<html>
<head>
<style>
p {
height: 200px;
}
.gradient-1 {
background: linear-gradient(0deg, #cfffcd, #ffffff);
}
.gradient-2 {
background: radial-gradient(#e2ff93, #cfffcd, #ffffff);
}
</style>
</head>
<body>
<main class="wallpapaer">
<p class="gradient-1">선형 그라디언트</p>
<p class="gradient-2">방사형 그라디언트</p>
</main>
</body>
</html>
하위 태스크 10
박스 모델 이해
콘텐츠, 패딩, 테두리, 여백의 구조와 역할 이해
- 콘텐츠: 콘텐츠가 표시되는 영역으로
width와height속성으로 크기를 변경할 수 있다. - 패딩: 콘텐츠 주변을 둘러싼 공백이다.
padding과 관련된 속성으로 크기를 변경할 수 있다. - 테두리: 콘텐츠와 패딩을 포함한 영역을 둘러싸는 테두리 선이다. 테두리 선은
border와 관련된 속성으로 제어할 수 있다. - 여백: 콘텐츠, 패딩, 테두리를 포함한 영역을 둘러싼 공백이다.
margin과 관련된 속성으로 크기를 변경할 수 있다.
하위 태스크 11
패딩과 마진 적용
padding,margin속성을 사용하여 요소 간격 조정
<!doctype html>
<html>
<head>
<style>
p {
background-color: aquamarine;
border: 1px solid blue;
}
.large-padding {
padding: 100px;
}
.small-padding {
padding: 10px;
}
.large-margin {
margin: 100px;
}
.small-margin {
margin: 20px;
}
</style>
</head>
<body>
<p class="large-padding">패딩 박스가 100px입니다.</p>
<p class="small-padding">패딩 박스가 10px입니다.</p>
<p class="large-margin">마진 박스가 100px입니다.</p>
<p class="small-margin">마진 박스가 20px입니다.</p>
</body>
</html>
하위 태스크 12
테두리 스타일 적용
border속성을 사용하여 테두리 스타일 지정
<!doctype html>
<html>
<head>
<style>
.awesome-border {
border-style: groove;
border-width: 10px;
border-color: darkcyan;
border-radius: 4px;
}
</style>
</head>
<body>
<p class="awesome-border">아주 멋진 테두리입니다!</p>
</body>
</html>