2021.08.21
<오늘 배운 것>
- padding: 테두리와 내용 사이의 공간
p {
padding: 위, 오른, 아래, 왼;
padding: 모두_같은_수치;
padding: 위=아래 왼=오른;
}- margin: 요소 주위의 여백 (테두리 밖)
p {
margin: 위, 오른, 아래, 왼;
margin: 모두_같은_수치;
margin: 위=아래 왼=오른;
}- overflow: 테두리 밖으로 내용물이 넘칠 때
p {
overflow: visible; //그대로 보이게 함
overflow: hidden; //숨겨짐
overflow: scroll; //스크롤 생성
overflow: auto; //스크롤 생성 but 안 넘칠 때는 안 생김
}- border: 테두리
p {
border: 굵기 스타일 색;
border-top(bottom, left, right) 지정 가능
border: none; //테두리 없애기
border-radius: 픽셀단위; //모서리 둥글게
border-top-left-radius등으로 지정가능
}- 배경
p {
background-color: 색; //body 태그에 쓸 경우 전체 배경색
background-image: url("사진주소"); //사진으로 배경 지정
}- 기타
* {
box-sizing: border-box; //맨 위에 써서 편하게 css 작성 가능
}- display: inline vs block
inline: 앞 뒤 텍스트와 같은 줄, 가로 길이 설정 불가능
span, a, b, i, img, button 등
block: 앞 뒤 텍스트와 다른 줄, 가로 길이 설정 가능
div, h1~h6, p, nav, ul, li 등
display: block (or inline); //기본 설정 변경 가능
display: inline-block; //같은 줄에 위치하나, 가로 세로 길이 지정 가능- 다양하게 링크 걸기
<a> 태그 사이에 글이나 img 태그 넣으면 링크 걸기 가능
img+글에 동시에 링크를 걸기 위해서는 div 태그 대신 a 태그를 사용하면 된다.- 예시
<!--html 코드-->
<!DOCTYPE html>
<html>
<head>
<title>Seventeen</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>
SEVENTEEN
</h1>
<h2>
한국의 13인조 보이그룹
</h2>
<div class="part">
<img class="photo" src="image/SVT.jpg">
<div class="letter">
<h3 class="name">
세븐틴
</h3>
<p class="info">
팀이름은 13명의 멤버+3개의 유닛+1개의 팀이라는 의미이다.<br>
팬덤 이름으로 캐럿을 사용하고 있다.<br>
데뷔일: 2015.05.26
</p>
</div>
</div>
<div class="part">
<img class="photo" src="image/SVTH.jpg">
<div class="letter">
<h3 class="name">
세븐틴 힙합팀
</h3>
<p class="info">
리더: 에스쿱스<br>
멤버: 원우, 민규, 버논<br>
특징: 4명의 멤버의 나이가 모두 다르다.<br>
힙합팀이지만 발라드를 좋아한다.<br>
유닛별 경기의 2등 담당
</p>
</div>
</div>
<div class="part">
<img class="photo" src="image/SVTV.jpg">
<div class="letter">
<h3 class="name">
세븐틴 보컬팀
</h3>
<p class="info">
리더: 우지<br>
멤버: 정한, 조슈아, 도겸, 승관<br>
특징: 세븐틴 유닛들 중 유일하게 5명이다.<br>
보컬팀이지만 개그와 힙합을 좋아한다.<br>
유닛별 경기에서 항상 1등
</p>
</div>
</div>
<div class="part">
<img class="photo" src="image/SVTP.jpg">
<div class="letter">
<h3 class="name">
세븐틴 퍼포먼스팀
</h3>
<p class="info">
리더: 호시<br>
멤버: 준, 디에잇, 디노<br>
특징: 막내 보유 유닛!<br>
퍼포먼스팀이지만 항상 누워있다.<br>
유닛별 경기에서 항상 3등(어삼퍼)
</p>
</div>
</div>
</body>
</html>/*css 파일*/
@font-face {
src: url("../font/BMJUA_ttf.ttf");
font-family: "Bamin";
}
* {
box-sizing: border-box;
}
body {
background-color: #F7CAC9;
font-family: "Bamin";
text-align: center;
}
.photo {
width: 300px;
height: 200px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
h1 {
font-size: 64px;
margin-top: 75px;
margin-bottom: 30px;
}
h2 {
font-size: 32px;
margin-bottom: 75px;
}
.letter{
padding: 20px;
}
.part {
display: block;
background-color: #92A8D1;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
margin-bottom: 50px;
width: 300px
}
.name{
font-size: 32px;
margin-top: 0;
}
.info {
font-size: 16px;
text-align: left;
margin-top: 0;
}<후기>
사실은 오늘 한게 아니라 저번 시간에 한 거지만 기록을 못 남겨서 오늘이라도 남긴다. 예시는 오늘 한 게 맞음 코드잇의 "배달의 민족" 실습 참고함. 이걸 바탕으로 앞으로 배운 것들도 응용해서 추가해나갈 생각인데 예뻐서 뭔가 마음에 든다.
