프론트엔드 개발자가 되려먼 HTML, CSS, JavaScript를 잘 다룰줄 알아야 합니다. 웹 페이지를 사람에 비유해보자면, 마크업 언어인 HTML은 몸의 구조(뼈, 근육)를 담당하고 CSS(Cascading Style Sheets 의 약자)는 옷과 신발과 같이 외적으로 꾸며주는 역할을 한다고 생각하면 이해하기 쉽습니다.
HTML에도 속성이 있고, CSS에도 속성이 있는데 둘은 같지 않습니다. HTML의 속성은 영어로 attribute이고, CSS의 속성은 property입니다. 둘 다 한국어로 번역할 때 '속성'이라고 하므로 잘 구분하셔야 합니다.
요소에 구애받지 않고 스타일 규칙을 적용할 때는 class 선택자와 id 선택자를 활용할 수 있습니다.
선택자 중에는 문서의 구조를 이용하여 요소를 선택하는 선택자도 있습니다. 문맥이나 요소의 구조를 기반으로 하여 선택자를 조합하는 것을 조합자 또는 '결정자' 라고 부릅니다.
부모 요소 는 그 요소를 포함하는 가장 가까운 상위 요소로, 그 요소의 부모요소 는 단 하나뿐입니다. 자식 요소 는 부모 요소와 반대라고 생각하면 되며, 여러 개일 수도 있습니다. 한편, 조상 요소 는 그 요소를 포함하는 모든 요소로, 부모 요소를 포함하여 여러 개일 수도 있습니다.
선택자에 요소가 많이 나열되어 있더라도 실제 선택되는 요소는 제일 우측 에 있는 요소라는점에 주의해야 합니다.
important 키워드는 별도의 구체성 값은 없지만, 모든 구체성을 무시하고 우선권을 갖습니다.
CSS에서 상속 은 우리가 기본적으로 알고 있는 부모가 가진 특성을 자식이 물려받는 개념과 같습니다. 어떤 스타일 규칙이 특정 요소뿐만 아니라 그 자손 요소까지 적용되는 것을 말합니다.
cascading은 스타일 규칙들이 어떠한 기준으로 요소에 적용되는지를 정한 규칙으로 중요도(!important)와 출처, 구체성, 선언 순서라는 세 가지 규칙으로 구성됩니다. 선언 순서 규칙에 따르면 뒤에 선언된 규칙이 우선적용됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>여러 요소에 스타일 적용하기</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<style>
/*여기에 스타일을 추가합니다.*/
</style>
</head>
<body>
<!--문제에 맞게 요소를 수정합니다.-->
<h2>고양이 사진첩</h2>
<main>
<p><a href="#">여기</a>를 클릭하면 더 많은 고양이 사진을 볼 수 있습니다.</p>
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
alt="바닥에 등을 대고 누워있는 주황색 고양이"></a>
<div>
<p>고양이가 좋아하는 것:</p>
<ul>
<li>캣닙</li>
<li>레이저 포인터</li>
<li>라자냐</li>
</ul>
<p>고양이가 싫어하는 것 TOP3:</p>
<ol>
<li>막 대하는 것</li>
<li>천둥</li>
<li>다른 고양이</li>
</ol>
</div>
<form action="https://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> 집 고양이</label>
<label><input type="radio" name="indoor-outdoor"> 야생 고양이</label><br>
<label><input type="checkbox" name="personality" checked> 사랑스러운 성격</label>
<label><input type="checkbox" name="personality"> 느긋한 성격</label>
<label><input type="checkbox" name="personality"> 에너지 넘치는 성격</label><br>
<input type="text" placeholder="내 고양이 사진 URL 주소" required>
<button type="submit">올리기</button>
</form>
</main>
</body>
</html>
2)
h2 요소에 red-text 클래스를 추가합니다.
h2 요소가 붉은색이 되도록 스타일을 수정합니다.
첫 번째 p 요소가 붉은색이 되도록 합니다.
두 번째, 세 번째 p 요소는 붉은색이 되면 안됩니다.
과제 완료 전과제 완료 후
-해결-
<!DOCTYPE html>
<html lang="ko">
<head>
<title>여러 요소에 스타일 적용하기</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<style>
.red-text { color: red;}
/* red-text 클래스 입력된 body 태그 내 h2 요소에 입력된 "고양이 사진첩"의
글씨를 빨간색으로 표현한다. */
main > p { color: red;}
/* main 요소의 자식 요소인 p 부분 빨간색으로 표현.
-> main 요소의 직계 자식 요소(p 요소)만 해당 된다. */
</style>
</head>
<body>
<h2 class="red-text">고양이 사진첩</h2>
<!--h2 요소 내 "red-text" 클래스 생성-->
<main>
<p><a href="#">여기</a>를 클릭하면 더 많은 고양이 사진을 볼 수 있습니다.</p>
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
alt="바닥에 등을 대고 누워있는 주황색 고양이"></a>
<div>
<p>고양이가 좋아하는 것:</p>
<ul>
<li>캣닙</li>
<li>레이저 포인터</li>
<li>라자냐</li>
</ul>
<p>고양이가 싫어하는 것 TOP3:</p>
<ol>
<li>막 대하는 것</li>
<li>천둥</li>
<li>다른 고양이</li>
</ol>
</div>
<form action="https://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> 집 고양이</label>
<label><input type="radio" name="indoor-outdoor"> 야생 고양이</label><br>
<label><input type="checkbox" name="personality" checked> 사랑스러운 성격</label>
<label><input type="checkbox" name="personality"> 느긋한 성격</label>
<label><input type="checkbox" name="personality"> 에너지 넘치는 성격</label><br>
<input type="text" placeholder="내 고양이 사진 URL 주소" required>
<button type="submit">올리기</button>
</form>
</main>
</body>
</html>
브라우저는 어떤 요소에 적용된 css 스타일이 상충할 땐 각 스타일에 구체성을 부여하고 판단하여 우선으로 적용할 것을 선택한다.
(구체성 제대로 이해했는지)
요소를 분홍색(pink)으로 만들어주는 CSS 클래스를 만듭니다.
h1 요소에 1에서 만든 클래스를 추가하면 요소가 녹색(green)이 될지, 분홍색(pink)이 될 지 예상하고 그 이유를 적어봅니다.
h1 요소에 실제 1에서 만든 클래스를 추가해 예상에 맞는 결과가 나왔는지 확인합니다.
과제 완료 전과제 완료 후
-해결-
<!DOCTYPE html>
<html lang="ko">
<head>
<title>구체성 이해하기</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<style>
/* [css 내 body(선택자)]
html - body 선택자는 웹페이지에 실제 나타낼 내용들을 보여준다.
반면, css - body는 html - body 내 스타일을 적용할 때 사용한다.
페이지 전체 배경뿐만 아니라 전체 폰트를 설정할 수도 있다. */
body {
background-color: black; /* 웹페이지 전체 배경 설정 */
font-family: monospace; /* 웹페이지 전체 글꼴 설정 */
color: green; /* 웹페이지 전체 글꼴 색상 서정 */
}
body {
background-color: black;
font-family: monospace;
color: pink;
}
/* css 내 같은 스타일 적용되면 먼저 선언된 스타일보다 가장 마지막에 선언된 스타일이 더 우선 */
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
-> css 내 같은 스타일이 적용되면 먼저 선언된 스타일보다 가장 마지막에 선언된 스타일이 더 우선하게 되어
결과에 반영된다.
4)
가상 클래스 선택자는 특정 요소의 상태를 미리 추정해서 가상의 클래스로 스타일을 적용할 수 있는 선택자다.
간단한 인풋 폼을 사용해 사용자 동작과 관련된 가상 클래스에 스타일 적용해봅시다.
question.html을 열어 스타일을 추가해 다음 요구사항을 만족시켜 봅시다.
input 요소가 사용자 입력으로 활성화 된 경우, 배경색을 붉은색(red)으로 변경합니다.
input 요소가 입력 초점을 가진 경우, 배경색을 붉은색(red)으로 변경합니다.
-해결-
<!DOCTYPE html>
<html lang="en">
<head>
<title>가상 클래스 스타일 바꾸기</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<style>
input:focus { /*현재 입력 포커스를 갖고 있는 요소에 적용 */
background-color: red;
}
input:active { /* 사용자 입력에 의해 활성화된 요소에 적용 */
background-color: red;
}
</style>
</head>
<body>
<form action="" method="post">
<!--form action="(URL)" : 서식 데이터(form data)를 서버로 보낼 때
해당 데이터가 도착할 URL
1. 절대 주소 2. 상대 주소-->
<!--method="post"
get vs post
get : 지정된 리소스에서 데이터를 요청하는 데 사용 (쿼리 문자열(이름/값 쌍)은 get 요청의 url로 전송됨.
post : 리소스 생성/업데이트 위해 서버에 데이터를 보내는 데 사용됨-->
<input type="text" id="name" name="name"><label for="name">이름</label><br><br>
<!--이름 입력칸
1. 이름은 영문이나 한글같은 텍스트로만 입력하므로 type은 text로 지정하였다.
2. id는 name으로 설정하였다.
3. name에서는 파라미터 전송 위해 name 값으로 지정하였다.
4. label for="요소 id"이므로, 앞서 input 태그 내 id값을 가져옴으로써 label과 결합될 요소를 명시하였다.-->
<!--id vs name
id : page안에서 중복으로 사용할 수 없음, JS에서 다루기 위함. -> 서버쪽으로 파라미터로 넘어가지 않기 떄문에 서버쪽에서 접근 안됨.
name : 중복 값을 가질 수 있음, 파라미터 전송 위해 지정.-->
<input max="10" min="1" type="number" name="age" id="age" placeholder="1"><label for="age">나이</label><br><br>
<!--나이 입력칸
1. 나이는 숫자로 입력하므로 type을 number로 주었다.
2. 숫자는 최소 1자리에서 최대 10자리까지 지정할 수 있도록 하였다.
3. label과 연결하기 위한 id 값은 age로 지정하였다.
4. 파라미터 전송 위해 name을 age로 지정하였다.
5. 유저에게 예시를 보여주기 위한 초기값으로 "1"을 지정하였다. (placeholder)
-> 미션에서 1로 지정되어 있길래 똑같이 1이 보이면 좋겠다 싶어서 추가함.-->
<fieldset>
<!--fieldset 요소
웹 양식의 여러 컨트롤과 label을 묶을 때 사용.-->
<legend>좋아하는 색</legend>
<!--legend 요소
부모 콘텐츠(fieldset)의 설명 나타냄.-->
<input id="blue" name="fav-color" type="checkbox" value="blue" checked="on"><label for="blue">파란색</label>
<!--"파란색" 체크박스
1. label과 연결 위한 id 값을 blue로 지정하였다.
2. 파라미터 전송 위해 name값을 fav-color로 지정하였다.
3. type은 checkbox로 지정하여 체크박스를 생성해주었다.
4. input 요소의 값으로 blue를 명시해주었다.
5. checked="on"을 입력해줌으로써 유저가 체크하지 않아도 미리 체크되어 있는 상태로 볼 수 있게 하였다.
-> 미션-결과 부분에서 미리 체크되어 있어서 똑같이 미리 체크되어 있는 것으로 추가함.-->
<!--checked="on" : 미리 체크되어 있는 상태로 나타남-->
<input id="red" name="fav-color" type="checkbox" value="red" checked="on"><label for="red">붉은색</label>
<input id="green" name="fav-color" type="checkbox" value="green" checked="on"><label for="green">녹색</label>
</fieldset>
<br>
<input type="submit">
<!--submit(제출) 버튼 생성-->
</form>
</body>
</html>
유저가 입력창 활성화 시키지 않았을 때유저가 입력창 활성화 시켰을 때 (나이 입력창도 활성화 시 빨간색으로 배경이 변경된다.)
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS 이해하기 종합</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<style>
h2 {
font-size: 2rem;
margin-bottom: 1rem;
}
p {
margin-bottom: 24px;
}
aside p:last-of-type {
margin-bottom: 0;
}
aside {
background: lightgray;
border: 2px solid;
padding: 16px;
}
/*여기에 스타일을 추가합니다.*/
</style>
</head>
<body>
<article>
<h2>세계 지구의 날 - 대한민국 청와대</h2>
<p>
오늘은 지구의 날입니다.
세계 시민들이 뜻을 모아 정한 날로, 52년 전 미국의 대규모 원유 유출 사고를 계기로 시작되었습니다.
<a href="">세계적인 비영리단체 ‘Earth Day’</a>가 정한 올해 지구의 날 주제는 ‘지구에 투자하자’입니다.
우리는 저녁 8시, 10분의 소등으로 함께할 것입니다.
어둠 속에서 잠시 우리의 특별한 행성, 지구를 생각해보았으면 합니다.
</p>
<p>
지금 인류는 지구 위기의 심각성을 느끼며 지구 생명체의 한 구성원으로서 탄소중립을 실천하고 있습니다.
우리나라 역시 세계에서 14번째로 탄소중립을 법제화했고, 2030년 국가 온실가스 감축목표도 40%로 상향하며 우리의 강력한 탄소중립 실현 의지를 국제사회에 알렸습니다.
쉽지 않은 일이지만 지금처럼 국민과 산업계, 정부가 힘을 합한다면 우리가 앞장서 새로운 시대를 열어갈 수 있을 것입니다.
</p>
<p>
우리 국민들은 세계 어느 나라보다 탄소중립 의지가 높고, 강한 실천력이 있습니다.
에너지 절약과 분리배출, 플라스틱 줄이기에도 성숙한 시민의식을 보여주고 있습니다.
불편함을 보람으로 바꿔내 주신 국민들의 참여와 노력만큼 탄소중립 정책이 다음 정부에서도 성공적으로 추진되길 바랍니다.
</p>
<p>
우리의 지구사랑, 아직 늦지 않았습니다.
저도 오늘 금강송 한 그루를 지구에 투자하겠습니다.
</p>
<aside>
대한민국 청와대는 <strong>공식 홈페이지, 트위터, 페이스북</strong>을 통해 문재인 대통령의 말과 글을 공유합니다. <a href="">이곳</a>을 클릭하면 공식 홈페이지로 이동합니다.
</aside>
</article>
</body>
</html>
5)
css 개념 사용하여 스타일 추가
1-1. 메인 글 내에 있는 링크의 색은 blue이어야 하고 밑줄이 없어야 합니다.
1-2. 커서가 해당 링크 위에 올라갔을 땐 밑줄이 생깁니다.
2-1. aside 요소 안에 있는 링크 색은 black 이어야 하고, 밑줄이 있어야 합니다.
2-2. 커서가 해당 링크 위에 올라가면 밑줄이 사라집니다.
주의사항: HTML 수정은 금지합니다. 요소에 클래스 등을 추가할 수 없습니다.
-해결-
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS 이해하기 종합</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<!--meta 태그의 content 속성은 name 속성이나 http-equiv 속성과 관련된 값(value)을 명시한다.-->
<style>
h2 {
font-size: 2rem;
/*rem : (최상위 태그의 font-size 값)기준이 되는 값을 지정된 배수로 변환해 표현한 크기. */
margin-bottom: 1rem;
/* margin-bottom : 요소의 아래쪽에 바깐 여백 영역(margin area) 설정,
-> 양수 : 인접 요소와 거리 넓힘, 음수 : 인접 요소와 거리 좁힘 */
}
p {
margin-bottom: 24px;
}
aside p:last-of-type {
margin-bottom: 0;
}
aside {
background: lightgray;
border: 2px solid;
padding: 16px;
/* padding : 내용(content)과 테두리(border) 사이 간격인 패딩 영역의 크기 설정 */
}
article > p > a:link { color: blue; text-decoration-line: none;}
/* text-decoration-line: none : (링크)기본 밑줄 없애기 */
article > p > a:visited {color: blue;}
/* 링크 누르면 보라색으로 색상 변경되는 설정 없애기 (기존 blue색으로 지정) */
article > p > a:hover {color: blue; text-decoration-line: underline;}
/* text-decoration-line: underline : 마우스 커서를 해당 링크 위에 올리면 밑줄 생성 */
article > p > a:active {color: blue;}
/* artivle의 자식 요소인 p의 자식 요소인 a로 범위 설정 */
aside > a:link { color: black;}
/* aside의 자식 요소인 a로 범위 설정 */
/* 해당 링크 기본 색상 black으로 설정 */
aside > a:visited {color: black;}
/* 링크 누르면 보라색으로 색상 변경되는 설정 없애기 (기존 black색으로 지정) */
aside > a:hover {color: black; text-decoration-line: none;}
/* text-decoration-line: underline : 마우스 커서를 해당 링크 위에 올리면 밑줄 없어지는 효과 생성 */
aside > a:active {color: black;}
/* link - visited - hover - active : 순서 잘 지켜야 링크를 클릭했음에도 보라색으로 색상 변경이 되지 않는다. */
/* + 개념 확장
1. 밑줄 색깔 바꾸기 : red
a {
text-decoration-color: red;
}
2. 밑줄 모양 접선으로 바꾸기
a {
text-decoration-style: dotted;
}
-> 그 외 solid, double, dashed, wavy 등으로 밑줄 스타일 변경 가능
3. 밑줄 모양 굵기 바꾸기 (thickness)
a {
text-decoration-color: red;
text-decoration-thickness: 5px;
}
-> crome 브라우저에서 color없이 thickness만 설정할 경우, 밑줄 굵기가 변하지 않는다고 한다.
브라우저 버그라는데 지금 내 브라우저에서도 실행되지 않는지 확인해봐야겠다.
4. 선 위치, 색깔, 모양, 굵기 한 번에 바꾸기
a {
text-decoration: underline red dotted 5px;
}
-> 한꺼번에 바꿀 수 있는데 공백으로 구분한다.*/
</style>
</head>
<body>
<article>
<h2>세계 지구의 날 - 대한민국 청와대</h2>
<p>
오늘은 지구의 날입니다.
세계 시민들이 뜻을 모아 정한 날로, 52년 전 미국의 대규모 원유 유출 사고를 계기로 시작되었습니다.
<a href="">세계적인 비영리단체 ‘Earth Day’</a>가 정한 올해 지구의 날 주제는 ‘지구에 투자하자’입니다.
우리는 저녁 8시, 10분의 소등으로 함께할 것입니다.
어둠 속에서 잠시 우리의 특별한 행성, 지구를 생각해보았으면 합니다.
</p>
<p>
지금 인류는 지구 위기의 심각성을 느끼며 지구 생명체의 한 구성원으로서 탄소중립을 실천하고 있습니다.
우리나라 역시 세계에서 14번째로 탄소중립을 법제화했고, 2030년 국가 온실가스 감축목표도 40%로 상향하며 우리의 강력한 탄소중립 실현 의지를 국제사회에 알렸습니다.
쉽지 않은 일이지만 지금처럼 국민과 산업계, 정부가 힘을 합한다면 우리가 앞장서 새로운 시대를 열어갈 수 있을 것입니다.
</p>
<p>
우리 국민들은 세계 어느 나라보다 탄소중립 의지가 높고, 강한 실천력이 있습니다.
에너지 절약과 분리배출, 플라스틱 줄이기에도 성숙한 시민의식을 보여주고 있습니다.
불편함을 보람으로 바꿔내 주신 국민들의 참여와 노력만큼 탄소중립 정책이 다음 정부에서도 성공적으로 추진되길 바랍니다.
</p>
<p>
우리의 지구사랑, 아직 늦지 않았습니다.
저도 오늘 금강송 한 그루를 지구에 투자하겠습니다.
</p>
<aside>
대한민국 청와대는 <strong>공식 홈페이지, 트위터, 페이스북</strong>을 통해 문재인 대통령의 말과 글을 공유합니다. <a href="">이곳</a>을 클릭하면 공식 홈페이지로 이동합니다.
</aside>
<!--aside : 내용과 관련있는 부분 (사이드로 내용 소개)-->
<!--strong : 해당 문구 강조 처리-->
</article>
</body>
</html>
기본 화면"세계적인 비영리단체 ... " 링크 부분에 마우스 커서 올렸을 때 / 밑줄 효과aside 내 '이곳' 단어 부분에 마우스 커서 올렸을 때 / 밑줄 상쇄 효과
rem과 em 모두 초기 font-size 설정값에서 비례하여 배수 단위로 증가/감소 속성 값이라고 알고 있습니다.
[미션 5] <style> h2 { font-size: 2rem; margin-bottom: 1rem; } 이 부분에서 font-size 초기값이 지정되지 않았는데 바로 2rem하면 컴퓨터가 잘 알아듣고 px단위로 바꿔서 폰트 크기를 설정하는 건가요?초기값이 지정되지 않은 2rem의 크기는 구체적인 값이 어느정도 되는 건가요??그리고 rem과 em의 차이가 최상위 요소의 차이라고 하던데 rem은 html 요소의 전체적인 font-size를 지정하는 것이고, em은 해당 부분 요소의 일부적인 font-size를 지정하는 것이라고 이해해도 되나요?rem은 16px인데 em이 24px일 경우, em이 우선인가요?
[미션 피드백]
1번 미션
굿~
2번 미션
스타일링 가능한 속성을 잘 찾아보셨네요~ 굿굿
하지만 미션에서 왜 red-text라는 클래스를 만들게 했을지 고민을 해보면 더 좋을 것 같아요. red-text라는 class는 h2 요소에만 사용할 수 있을까요? 혹은 어딘가에 “재활용"해볼 수 있지 않을까요? 갑자기 앗 미션을 바꿔서 첫번째 요소가 아닌 두번째 요소를 빨간글씨로 바꿔주세요 라고 한다면 어떻게 빠르게 대응할 수 있을까요? 고민해 보시고 스레드에 다른 답을 남겨주시면 확인하겠습니다:)
<!DOCTYPE html>
<html lang="ko">
<head>
<title>여러 요소에 스타일 적용하기</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<style>
.red-text { color: red;}
/* red-text 클래스 입력된 body 태그 내 h2 요소에 입력된 "고양이 사진첩"의
글씨를 빨간색으로 표현한다. */
/*main > p { color: red;}
/* main 요소의 자식 요소인 p 부분 빨간색으로 표현.
-> main 요소의 직계 자식 요소(p 요소)만 해당 된다. */
</style>
</head>
<body>
<h2 class="red-text">고양이 사진첩</h2>
<!--h2 요소 내 "red-text" 클래스 생성-->
<main>
<p class="red-text"><a href="#">여기</a>를 클릭하면 더 많은 고양이 사진을 볼 수 있습니다.</p>
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
alt="바닥에 등을 대고 누워있는 주황색 고양이"></a>
<div>
<p>고양이가 좋아하는 것:</p>
<ul>
<li>캣닙</li>
<li>레이저 포인터</li>
<li>라자냐</li>
</ul>
<p>고양이가 싫어하는 것 TOP3:</p>
<ol>
<li>막 대하는 것</li>
<li>천둥</li>
<li>다른 고양이</li>
</ol>
</div>
<form action="https://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> 집 고양이</label>
<label><input type="radio" name="indoor-outdoor"> 야생 고양이</label><br>
<label><input type="checkbox" name="personality" checked> 사랑스러운 성격</label>
<label><input type="checkbox" name="personality"> 느긋한 성격</label>
<label><input type="checkbox" name="personality"> 에너지 넘치는 성격</label><br>
<input type="text" placeholder="내 고양이 사진 URL 주소" required>
<button type="submit">올리기</button>
</form>
</main>
</body>
</html>
<main> 직계 자식인 <p> 요소에도 클래스를 재활용해주었다.
<head> - style 부분에서 이렇게 안해도 클래스만 따로 추가해줘도 코드는 실행이 되었다.
이것저것 다 고려해서 추가하는 것보다는 간결하고 깔끔한 코드를 입력하려는 생각을 계속 해봐야겠다.
main > p { color: red;}
->
<pclass="red-text"><ahref="#">
3번 미션
굿굿
다만 toPink 라는 이름에 대해서 고민해보셨으면 좋겠어요. 이 미션의 요구사항을 모르고 style 부분을 보지 않는 사람이<h1 class="toPink">Hello World!</h1>라는 것만 보고 Hello World!는 글자색이 분홍색이겠구나를 바로 알아볼 수 있을까요? 저는 배경색이 분홍색인건지, 글자색이 분홍색인건지, 아니면 Hover를 했을 때 분홍색으로 변한다는건지 알기 어려울 것 같아요. 학습하면서 이런부분까지 신경쓰기 어렵긴하지만 좋은 네이밍에 대해서 고민해보셨으면 좋겠습니다! 4주차 미션에 이런 고민이 반영되길 기대하겠습니다~
글자의 색이 분홍인지, 포커스가 맞춰져 있을 때만 분홍색인 것인지 등의 구체적인 상황 또한 포함하는
작명 센스가 있어야 할 것 같다.
그 부분도 고민해봐야겠다. 최대한 구체적으로 개발자 입장에서 남의 코드를 뜯어봤을 때 알기 쉽게 이름을 짓는
것도 많이 고민해봐야 할 부분 같다.
기본_글자_분홍색으로
defalut color pink text
TXT_pink_defalut 로 지어봤는데 괜찮은지 모르겠다. 다들 어떻게 간결하면서 구체적으로 짓는 거지..?
<!DOCTYPE html>
<html lang="ko">
<head>
<title>구체성 이해하기</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<style>
body {
background-color: black; /* 웹페이지 전체 배경 설정 */
font-family: monospace; /* 웹페이지 전체 글꼴 설정 */
}
.TXT_pink_defalut {
color : pink
}
</style>
</head>
<body>
<h1 class="TXT_pink_defalut">Hello World!</h1>
</body>
</html>
4번 미션
잘 작성해 주셨는데요~ 구분이 어려워 색상을 변경해 볼수는 있지만(시도 좋아요!) 미션의 내용을 임의로 수정할수는 없다고 생각합니다. 일을 할 때에도 기획서의 내용이 알아보기 힘들다고 개발에서 임의로 변경할 수 있지는 않고 모두 합의를 통해 결정되는데요, 미션의 내용이 이상하다거나, 이렇게 개선되었으면 좋겠다 라는 점이 있다면 저나 운영진분들께 건의 주시면 더 좋을 것 같습니다~
각각의 html 요소(태그) 및 속성에 대해 이해하려고 한 노력이 html 에서 잘 나타나네요!
input:active와 input:focus의 순서에 대해서 고민해본 점도 좋습니다
5번 미션
css의 속성에 대해서도 각각 파악하려고 하신 노력 좋아요 text-decolation 을 각각 해보면서 확인하신 것 같네요!
답안은 고민을 더 해보시면 좋을 것 같아요. a:first-child의 경우 첫번째 a 태그만 속성이 적용되는데요, 미션에서 주어진 요구사항은 “메인 글 내에 있는 링크의 색은blue이어야 하고 밑줄이 없어야 합니다.” 입니다. 만약<p><a href="">오늘은</a><a href="">지구</a>의 날입니다</p>처럼 하나의 블록안에 여러개의 a태그가 있다면 요구사항을 만족할 수 있을까요?
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS 이해하기 종합</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<!--meta 태그의 content 속성은 name 속성이나 http-equiv 속성과 관련된 값(value)을 명시한다.-->
<style>
h2 {
font-size: 2rem;
/*rem : (최상위 태그의 font-size 값)기준이 되는 값을 지정된 배수로 변환해 표현한 크기. */
margin-bottom: 1rem;
/* margin-bottom : 요소의 아래쪽에 바깐 여백 영역(margin area) 설정,
-> 양수 : 인접 요소와 거리 넓힘, 음수 : 인접 요소와 거리 좁힘 */
}
p {
margin-bottom: 24px;
}
aside p:last-of-type {
margin-bottom: 0;
}
aside {
background: lightgray;
border: 2px solid;
padding: 16px;
/* padding : 내용(content)과 테두리(border) 사이 간격인 패딩 영역의 크기 설정 */
}
/*/////////////// 답 안 //////////////////*/
a:first-child {
color: blue;
text-decoration: none;
}
a:first-child:hover {
text-decoration-line: underline;
}
aside>a {
color : black;
}
aside>a:hover {
text-decoration: none;
}
/*/////////////// 답 안 //////////////////*/
/* + 개념 확장
1. 밑줄 색깔 바꾸기 : red
a {
text-decoration-color: red;
}
2. 밑줄 모양 접선으로 바꾸기
a {
text-decoration-style: dotted;
}
-> 그 외 solid, double, dashed, wavy 등으로 밑줄 스타일 변경 가능
3. 밑줄 모양 굵기 바꾸기 (thickness)
a {
text-decoration-color: red;
text-decoration-thickness: 5px;
}
-> crome 브라우저에서 color없이 thickness만 설정할 경우, 밑줄 굵기가 변하지 않는다고 한다.
브라우저 버그라는데 지금 내 브라우저에서도 실행되지 않는지 확인해봐야겠다.
4. 선 위치, 색깔, 모양, 굵기 한 번에 바꾸기
a {
text-decoration: underline red dotted 5px;
}
-> 한꺼번에 바꿀 수 있는데 공백으로 구분한다.*/
</style>
</head>
<body>
<article>
<h2>세계 지구의 날 - 대한민국 청와대</h2>
<p>
오늘은 지구의 날입니다.
세계 시민들이 뜻을 모아 정한 날로, 52년 전 미국의 대규모 원유 유출 사고를 계기로 시작되었습니다.
<a href="">세계적인 비영리단체 ‘Earth Day’</a>가 정한 올해 지구의 날 주제는 ‘지구에 투자하자’입니다.
우리는 저녁 8시, 10분의 소등으로 함께할 것입니다.
어둠 속에서 잠시 우리의 특별한 행성, 지구를 생각해보았으면 합니다.
</p>
<p>
지금 인류는 지구 위기의 심각성을 느끼며 지구 생명체의 한 구성원으로서 탄소중립을 실천하고 있습니다.
우리나라 역시 세계에서 14번째로 탄소중립을 법제화했고, 2030년 국가 온실가스 감축목표도 40%로 상향하며 우리의 강력한 탄소중립 실현 의지를 국제사회에 알렸습니다.
쉽지 않은 일이지만 지금처럼 국민과 산업계, 정부가 힘을 합한다면 우리가 앞장서 새로운 시대를 열어갈 수 있을 것입니다.
</p>
<p>
우리 국민들은 세계 어느 나라보다 탄소중립 의지가 높고, 강한 실천력이 있습니다.
에너지 절약과 분리배출, 플라스틱 줄이기에도 성숙한 시민의식을 보여주고 있습니다.
불편함을 보람으로 바꿔내 주신 국민들의 참여와 노력만큼 탄소중립 정책이 다음 정부에서도 성공적으로 추진되길 바랍니다.
</p>
<p>
우리의 지구사랑, 아직 늦지 않았습니다.
저도 오늘 금강송 한 그루를 지구에 투자하겠습니다.
</p>
<aside>
대한민국 청와대는 <strong>공식 홈페이지, 트위터, 페이스북</strong>을 통해 문재인 대통령의 말과 글을 공유합니다. <a href="">이곳</a>을 클릭하면 공식 홈페이지로 이동합니다.
</aside>
</article>
</body>
</html>
-코치님 코드 반영
<p><a href="">오늘은</a><a href="">지구</a>의 날입니다</p>
-결과
txt color : blue, 밑줄 x, visited color : none → 해당 효과들이 없어졌다.
내가 전에 작성한 코드들로 한 번 테스트해봐야겠다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS 이해하기 종합</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<!--meta 태그의 content 속성은 name 속성이나 http-equiv 속성과 관련된 값(value)을 명시한다.-->
<style>
h2 {
font-size: 2rem;
/*rem : (최상위 태그의 font-size 값)기준이 되는 값을 지정된 배수로 변환해 표현한 크기. */
margin-bottom: 1rem;
/* margin-bottom : 요소의 아래쪽에 바깐 여백 영역(margin area) 설정,
-> 양수 : 인접 요소와 거리 넓힘, 음수 : 인접 요소와 거리 좁힘 */
}
p {
margin-bottom: 24px;
}
aside p:last-of-type {
margin-bottom: 0;
}
aside {
background: lightgray;
border: 2px solid;
padding: 16px;
/* padding : 내용(content)과 테두리(border) 사이 간격인 패딩 영역의 크기 설정 */
}
/*/////////////// 답 안 //////////////////*/
article > p > a:link { color: blue; text-decoration-line: none;}
/* text-decoration-line: none : (링크)기본 밑줄 없애기 */
article > p > a:visited {color: blue;}
/* 링크 누르면 보라색으로 색상 변경되는 설정 없애기 (기존 blue색으로 지정) */
article > p > a:hover {color: blue; text-decoration-line: underline;}
/* text-decoration-line: underline : 마우스 커서를 해당 링크 위에 올리면 밑줄 생성 */
article > p > a:active {color: blue;}
/* artivle의 자식 요소인 p의 자식 요소인 a로 범위 설정 */
/*/////////////// 답 안 //////////////////*/
/* + 개념 확장
1. 밑줄 색깔 바꾸기 : red
a {
text-decoration-color: red;
}
2. 밑줄 모양 접선으로 바꾸기
a {
text-decoration-style: dotted;
}
-> 그 외 solid, double, dashed, wavy 등으로 밑줄 스타일 변경 가능
3. 밑줄 모양 굵기 바꾸기 (thickness)
a {
text-decoration-color: red;
text-decoration-thickness: 5px;
}
-> crome 브라우저에서 color없이 thickness만 설정할 경우, 밑줄 굵기가 변하지 않는다고 한다.
브라우저 버그라는데 지금 내 브라우저에서도 실행되지 않는지 확인해봐야겠다.
4. 선 위치, 색깔, 모양, 굵기 한 번에 바꾸기
a {
text-decoration: underline red dotted 5px;
}
-> 한꺼번에 바꿀 수 있는데 공백으로 구분한다.*/
</style>
</head>
<body>
<article>
<h2>세계 지구의 날 - 대한민국 청와대</h2>
<p>
<a href="">오늘</a>은 <a href="">지구</a>의 날입니다.
세계 시민들이 뜻을 모아 정한 날로, 52년 전 미국의 대규모 원유 유출 사고를 계기로 시작되었습니다.
<a href="">세계적인 비영리단체 ‘Earth Day’</a>가 정한 올해 지구의 날 주제는 ‘지구에 투자하자’입니다.
우리는 저녁 8시, 10분의 소등으로 함께할 것입니다.
어둠 속에서 잠시 우리의 특별한 행성, 지구를 생각해보았으면 합니다.
</p>
<p>
지금 인류는 지구 위기의 심각성을 느끼며 지구 생명체의 한 구성원으로서 탄소중립을 실천하고 있습니다.
우리나라 역시 세계에서 14번째로 탄소중립을 법제화했고, 2030년 국가 온실가스 감축목표도 40%로 상향하며 우리의 강력한 탄소중립 실현 의지를 국제사회에 알렸습니다.
쉽지 않은 일이지만 지금처럼 국민과 산업계, 정부가 힘을 합한다면 우리가 앞장서 새로운 시대를 열어갈 수 있을 것입니다.
</p>
<p>
우리 국민들은 세계 어느 나라보다 탄소중립 의지가 높고, 강한 실천력이 있습니다.
에너지 절약과 분리배출, 플라스틱 줄이기에도 성숙한 시민의식을 보여주고 있습니다.
불편함을 보람으로 바꿔내 주신 국민들의 참여와 노력만큼 탄소중립 정책이 다음 정부에서도 성공적으로 추진되길 바랍니다.
</p>
<p>
우리의 지구사랑, 아직 늦지 않았습니다.
저도 오늘 금강송 한 그루를 지구에 투자하겠습니다.
</p>
<aside>
대한민국 청와대는 <strong>공식 홈페이지, 트위터, 페이스북</strong>을 통해 문재인 대통령의 말과 글을 공유합니다. <a href="">이곳</a>을 클릭하면 공식 홈페이지로 이동합니다.
</aside>
</article>
</body>
</html>
잘 반영되었다.
범위의 문제인 것 같다.
요구사항이 <p> 중 첫번째 부분만 반영되게 해달라는 거였으면 a:first-child 부분이 적당하겠으나,
이번 미션의 요구사항은 글 내 모든 링크가 반영되게 해달라는 거였으므로 적당한 코드가 아니었다.
무조건 미션만 해결했다고 되는게 아니라, 요구사항의 디테일한 면까지 맞는지 확인하고 체크하는
습관을 길러야겠다.
aside>a 도 마찬가지로 스타일이나 구조를 이유로<aside> 대한민국 청와대는 <strong><a href="">공식 홈페이지</a>, <a href="">트위터</a>, <a href="">페이스북</a></strong>을 통해... </aside>과 같이 a태그가 aside 의 바로 다음 요소(태그)가 아닌 경우엔 어떻게 될까요?
