2일차에는 블록레벨과 인라인레벨, CSS의 속성들에 대해서 배웠다.
이미 공부를 했었기 때문에 복습하는 부분도 있었고 새롭게 알게 된 부분도 있었다.
그래서 오늘 새롭게 알게 된 것에 대해서 정리를 해보고, 교육 과정 중에 다 끝내지 못한 예제 문제를 혼자 적용해본 것을 정리해보려고 한다.
새롭게 알게 된 것들
-
인라인 요소는 넓이와 높이가 적용이 되지 않는데 그중에서 넓이와 높이가 적용되는 태그
<img>,input이다. -
width: auto;: CSS에서 width 속성을 지정하지 않으면 auto가 기본이다. -
widht: 100%;: margin, padding, border 영역을 다 포함한 값. 포함하지 않고 싶다면box-sizing: border-box;를 적용하면 된다. -
list-style: none;:<li>태그 앞의 스타일을 없애준다.list-style-type속성으로 list 앞에 있는 스타일을 바꿔줄 수 있지만, 대체로::beforepseudo-element를 이용해서 바꾼다.
-
text-align: 블록 요소나 표의 칸 상자의 가로 방향으로 정렬한다.text-align: start;: 시작점 정렬text-align: end;: 끝점 정렬text-align: center;: 가운데 정렬text-align: justify;: 양쪽 정렬
background
background는 배경으로 border부터 적용이 됩니다.
-
background-clip: 배경을 적용할 범위를 조절할 수 있는 속성이다.background-clip: border-box;: defaultbackground-clip: padding-box;: border를 제외하고 padding까지만 적용background-clip: content-box;: content만 적용
-
background-repeat: 배경의 반복 지정 (repeat이 기본, 가로 세로 반복임)background-repeat: no-repeat;: 반복 Xbackground-repeat: repeat-x;: x축으로 반복(가로)background-repeat: repeat-y;: y축으로 반복(세로)
-
background-size: 배경 이미지 크기 조절할 수 있는 속성 (기본 auto)background-size: contain;: 비율을 유지하면서 요소 안에 이미지 크기를 조절background-size: cover;: 요소 전체를 모두 덮도록 확대하거나 축소하기 때문에 잘리는 부분이 있을 수 있다.
-
background-position: 배경 이미지 위치 조절 (수평, 수직)- 값을 하나만 지정할 경우, 수평 위치 값으로 지정되고 수직 위치 값은 50%나 center로 지정된다.
- 수평위치 : left, center, right(키워드, px, 백분율)
- 수직위치 : top, center, bottom(키워드, px, 백분율)
img { background-position: -
background-origin
예제
수업 중에 적용해보지 못한 예제를 따로 풀어보았다. 사진은 저작권 문제가 있기 때문에 pixabay에서 자유롭게 이용이 가능한 사진으로 대체해서 만들었다. (아래 이미지와 코드는 직접 풀고, 스크린샷으로 찍었습니다...ㅎ)
- 첫 번째
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./05.css" />
</head>
<body>
<div class="wrap">
<div class="title-box">
<h2>어떤 날, 원데이 클래스</h2>
<p>남들 다 가는 흔한 휴가 대신 특별하게 보내고 싶었다. 배우고 싶었지만 미뤄둔 원 데이 클래스를 들었다.</p>
</div>
<div class="content-box">
<h2>맥주란 이런 맛</h2>
<ul>
<li><b>주소</b> 서울 용산구 이태원 2동 691 맥파이</li>
<li><b>수강 시간</b> 7월 12, 26일 12:30 (1시간 30분 소요)</li>
<li><b>수강료</b> 6만 5천원</li>
</ul>
<img src="./images/beer-g42b87a1f8_1920.jpg" alt="맥주 사진" />
<p class="des">
맥주에 대한 무한 애정을 품고 있지만, 단순히 먹고 마시는 걸로는 뭔가 부족했다. 기성 맥주에선 맛볼 수 없는 신세계를 경험하고 싶어 맥파이의 브루잉, 테이스팅 클래스를 찾았다. 전 세계에서 가장 핫한 미국, 벨기에산 맥주 다섯 종류를 시음하면서 본인이 선호하는 맛을 찾고, 맥주 양조의 기본 지식도 알려준다. 나름 맥주 전문가라고 생각하던 게 부끄러워질 만큼 새로운 정보를 알게 돼 재미가 쏠쏠했다. 누구라도 여기서 배운 내용만 숙지해둔다면 맥주에 대해 조금 아는 체할 수 있을 듯. 시음을 통해 본인이 선호하는 맛과 향을 찾았다면 브루잉 클래스에 도전해도 좋다. 기호에 따라 라거나 에일 등 원하는 맥주를 만들 수 있는 한 달 과정의 클래스다. 특별히 여름에만 맛볼 수 있는 시즌 클래스가 있으니, 관심 있는 사람이라면 기억해두자.
</p>
<div class="anchor-box">
<a href="javascript:void(0)">+더보기</a>
</div>
</div>
<div class="content-box">
<h2>아기자기 인형 만들기</h2>
<ul>
<li><b>주소</b> 서울 중구 정동 1-28 신아기념관 208호 주트</li>
<li><b>수강 시간</b> 7월 6, 20일 11:00 / 30일 19:00 (2시간 30분 소요)</li>
<li><b>수강료</b> 6만9천원</li>
</ul>
<img src="./images/family-ge45fd14c8_1280.jpg" alt="곰인형 사진" />
<p class="des">
누가 그랬다. 바느질과 뜨개질만큼 훌륭한 두뇌 스포츠는 없다고. 끊임없이 손을 움직이면서 머리도 굴리고 무엇보다 스트레스를 푸는 게 좋다는 거다. 믿어보는 셈치고 마감이 끝난 뒤 주트의 아담한 공방을 찾았다. 본인이 그린 그림을 바탕으로 패브릭을 잇고 붙여 앙증맞은 패브릭 인형을 만드는 클래스를 수강했다. 일단 상상력에 제한을 받지 않고, 밑그림을 마음껏 그릴 수 있어 재미있었고, 내가 만들 인형의 원단도 마음대로 고를 수 있어 좋았다. 또 난생처음 사용해보는 패브릭 마커와 재봉틀에 주춤했지만, 공방 주인장의 도움으로 깔끔하게 완성할 수 있었다. 재봉틀을 한 번도 써보지 않은 사람이라면 반드시 도움을 청할 것. 그리고 3명 이상 그룹으로 원 데이 클래스를 신청하면 원하는 날짜와 시간에 맞춰 프라이빗 클래스를 진행할 수도 있다.
</p>
<div class="anchor-box">
<a href="javascript:void(0)">+더보기</a>
</div>
</div>
<div class="content-box">
<h2>일러스트레이터가 되고 싶다</h2>
<ul>
<li><b>주소</b> 서울 강남구 삼성동 69-8 콘텐스튜디오</li>
<li><b>수강 시간</b> 7월 매주 월·금요일 19:30(2시간 30분 소요)</li>
<li><b>수강료</b> 4만9천원</li>
</ul>
<img src="./images/graphics-tablet-g4dcb98692_1280.jpg" alt="그래픽 타블렛 사진" />
<p class="des">
메모하고, 책에 줄 긋고, 표시를 하는 등 하루 종일 펜을 쓰면서도 정작 그림은 그리지 못한다. 거창한 미술 도구가 아니라 ‘펜으로 내가 원하는 그림을 그려봤으면…’ 하던 차에 콘텐스튜디오에서 열리는 펜 드로잉 클래스를 알게 됐다. 매일 쓰는 펜을 이용해 그리는 것이 바로 이곳 원 데이 클래스의 취지. 그 때문에 평소 그리고 싶던 소품이나 동물, 사람 등을 시안으로 가져가는 게 준비물 아닌 준비물이다. 왜냐하면 본인 생활과 밀접한 부분부터 그려보는 게 앞으로 그릴 그림의 폭을 넓힐 수 있는 방법이기 때문. 많은 도구를 사용하지 않고 펜 하나만 쓰기 때문에 그림에 소질이 없는 사람도 충분히 멋진 그림을 그릴 수 있다. 파인 아트를 전공한 작가가 운영하기 때문에 명암을 표현하는 방법, 마카와 아크릴 물감 사용법 등 그림의 기초적 요소를 배울 수 있는 건 덤이다.
</p>
<div class="anchor-box">
<a href="javascript:void(0)">+더보기</a>
</div>
</div>
<div class="content-box">
<h2>소박하고 아름다운 빈티지 부케</h2>
<ul>
<li><b>주소</b> 서울 용산구 이태원동 225-154 2층 플라워살롱 낭</li>
<li><b>수강 시간</b> 주중·주말 상관없이 원하는 시간 예약 가능 (1시간 30분 소요) </li>
<li><b>수강료</b> 7만원</li>
</ul>
<img src="./images/wedding-bouquet-g439e4e4b1_1280.jpg" alt="부케 사진" />
<p class="des">
친구 따라 강남 간다고, 꽃을 사랑하는 친구 덕에 플라워살롱 낭에서 원 데이 클래스를 수강했다. 본인이 좋아하는 꽃의 종류와 스타일을 말해두면 주인장이 그에 맞는 꽃을 다채롭게 준비해준다. 봉오리가 큰 꽃뿐 아니라 들에서 공수한 듯 잔잔한 느낌의 야생화도 적절히 섞는 터라 다른 곳에선 볼 수 없는 빈티지 부케를 만들 수 있다. 꽃의 크기와 색깔별로 어떻게 조합하면 좋을지, 바인딩 포인트를 어디로 하면 더 보기 좋을지 등 밀착 과외 식으로 설명해주니 꽃에 문외한인 에디터도 금방 적응할 수 있었다. 흔한 꽃으로 예쁘게만 스타일링하는 여느 꽃집과 달리 자연스러움을 강조하기 때문에 이곳에서 배운 내용을 바탕으로 다른 꽃에 응용하기도 쉬웠다. 원 데이 s클래스를 듣고 난 뒤 심화 과정을 수강하는 경우가 절반을 넘을 정도로 만족도가 높다.
</p>
<div class="anchor-box">
<a href="javascript:void(0)">+더보기</a>
</div>
</div>
</div>
</body>
</html>* {
margin: 0;
padding: 0;
}
body {
background-color: #BCD3B6;
}
.wrap {
background-color: #fff;
width: 500px;
margin: auto;
}
.wrap .title-box {
background-color: #D3D4D5;
padding: 30px 20px;
line-height: 1.5;
}
.wrap .title-box h2 {
margin-bottom: 10px;
}
.wrap .content-box {
padding: 30px 50px;
line-height: 1.7;
border-bottom: 1px solid #DBDBDB;
}
.wrap .content-box h2 {
text-align: center;
margin-bottom: 20px;
}
.wrap .content-box ul>li {
list-style: none;
}
.wrap .content-box img {
margin: 15px 0;
width: 100%;
}
.wrap .content-box .des {
justify-content: center;
color: #6E7174;
}
.wrap .content-box .anchor-box {
text-align: right;
}
.wrap .content-box .anchor-box a {
text-decoration: none;
color: #3180BD;
}- 두 번째 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Seoul Beauty</title>
<link rel="stylesheet" href="./06.css" />
</head>
<body>
<div class="wrap">
<div class="header">
<h2>SEOUL BEAUTY</h2>
<p>인구 1천만 명, 마천루 282개가 있는 서울. 이제 서울의 아름다움은 한국에서 나아가 전 세계로 뻗어가고 있다. 매일 자신을 더 나아지게 꾸미는 서울 여자의 뷰티를 이야기하다.</p>
</div>
<div class="content-box">
<h3>
<span>face of k-beauty</span> 서울의 아름다움, 디지털을 타고 전 세계로 퍼지다.
</h3>
<p>
스마트폰 터치 하나로 저 멀리 아랍에서도 서울 여자가 어떻게 화장하는지 그녀들의 라이프스타일은 어떤지 일거수일투족이 노출되는 SNS 시대다. 그 결과 한국의 뷰티 인플루언서는 SNS와 유튜브 등 디지털을 통해 전 세계로 자신의 영향력을 알리며 주목받고 있다.</p>
<p>
인스타그램 팔로어가 50만 명이 넘는 모델 아이린. 그녀는 발랄한 성격이 묻어나는 사진과 동영상을 통해 패션과 뷰티 라이프스타일을 꾸준히 공유해왔다. 그녀의 시그너처 헤어스타일인 투톤 헤어를 단발로 잘랐을 때는 영어부터 아랍어로까지 리플이 달릴 정도. 그 결과 아이린은 지난 7월 에스티 로더와 함께 글로벌 뷰티 산업에 중요한 영향을 미치는 K-뷰티를 알리는 인플루언서로 선정되었고, 2015 KCON USA에 참석, 최신 K-뷰티 트렌드를 이야기하는 등 자신의 영향력을 십분 발휘했다.</p>
<p>
유튜브 뷰티 스타에서 한류 가수의 메이크업 아티스트로 변신한 인물도 있다. 바로 메이크업 아티스트 포니. 그녀는 자신의 메이크업 북 시리즈와 메이크업 방법을 낱낱이 공개한 유튜브 채널로 세계에 K-뷰티를 전파했다. 자신만의 정교하고 트렌디한 메이크업 스타일로 최근 미국으로 진출한 가수 씨엘의 메이크업을 담당해 그녀가 성형했다는 소리까지 들을 정도로 이미지 변신을 시킨 것. 현재 메이블린 뉴욕의 모델로 활동하는 씨엘과 포니.</p>
<figure>
<img src="./images/makeup-brush-gf8756c62c_1280.jpg" alt="메이크업 브러쉬 사진" />
<figcaption>-사진 제공 씨엘 인스타그램(@chaelincl), 포니 신드롬(blog.naver.com/highkick_)</figcaption>
</figure>
</div>
<div class="content-box">
<h3>
<span>scent of seoul</span> 서울의 향기는 차분하면서 역동적이다.
</h3>
<p>
여행을 떠나 비행기에서 내리면 코끝에 감도는 향이 있다. 그래서 어떤 도시가 떠오르면 특유의 향기가 생각나기도 한다. 서울에 살거나 방문한 조향사들은 서울을 어떤 향으로 기억할까?</p>
<p>
더 센트 오브 디파처 서울은 조향사이자 크리에이터 제랄드 기슬랑이 내한한 후 조용한 서울의 아침에서 영감을 받아 탄생했다. “한국에 도착한 뒤 맞이한 서울에서의 첫 아침을 잊을 수 없습니다. 쾌청한 하늘에 한강을 건너며 마주한 초록빛 풍경과 청아한 바람은 서울을 탄생시키는 주 모티브가 되었습니다. 한강을 따라 서울을 잇는 맑고 투명한 청계천을 담아낸 서울 아쿠아 노트를 조합하게 되었고, 한국의 전통적인 아름다움을 흠뻑 느낄 수 있었던 남대문과 경복궁에서의 느낌을 라일락과 연꽃의 단아한 플로럴 향으로 풀어냈습니다. 광화문을 마주하며, 활기가 흐르는 모던한 서울의 도심 풍경은 평화롭고 편안하게 느껴졌던 잊을 수 없는 추억의 도시입니다.”</p>
<p>
배병우 작가의 소나무 사진이 패키지에 프린트된 아쿠아 디 콜로니아 알바 디 서울은 서울을 격조 높으면서 미래 지향적인 곳이라 여겼다. 서울의 새벽이라는 이름을 가진 이 향수는 600년 역사의 품위를 한국산 소나무와 베르가모트를 섞어 우디하게 표현했고, 하루를 힘차게 깨우는 서울 사람들의 밝은 에너지를 파촐리와 베티버 등과 조합해 중성적인 느낌으로 표현한 것.</p>
<figure>
<img src="./images/perfume-g4742bb88e_1280.jpg" alt="향수 사진" />
<figcaption>-가로수길에 위치한 빌라 수향을 모티브로 한 수향의 디퓨져</figcaption>
</figure>
</div>
</div>
</body>
</html>* {
margin: 0;
padding: 0;
}
body {
background-color: #DBDBDB;
}
p {
color: #646262;
line-height: 1.5;
text-align: justify;
font-family:'Times New Roman', Times, sans-serif;
}
figcaption {
font-size: 12px;
color: #4A4646;
text-align: center;
font-style: italic;
}
.wrap {
background-color: #fff;
width: 700px;
margin: auto;
}
.header {
border-bottom: 1px solid #96C1EB;
padding: 20px 30px;
}
.header h2 {
text-align: center;
text-decoration: underline;
font-size: 32px;
}
.wrap .content-box {
padding: 30px 50px;
border-bottom: 1px solid #96C1EB;
}
.wrap .content-box h3 {
text-align: center;
margin: 20px 0;
}
.wrap .content-box h3 span {
color: #971010;
font-style: italic;
}
.wrap .content-box img {
width: 100%;
margin: 16px 0;
}
경험한 것을 기록