[Review] 미니 프로젝트 코드 리뷰

mokyoungg·2020년 3월 29일
0

전체 코드

<!DOCTYPE=HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>자기소개 김영목</title>
    <link href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800|Nanum+Myeongjo:400,700,800|Do+Hyeon|Nanum+Brush+Script&display=swap" rel="stylesheet">
    <link rel='stylesheet' type='text/css' href='style.css'>
  </head>
  <body>
  <!--첫페이지. 간단한 소개 -->
    <div class="first">
      <p><strong>wecode 8기 김영목<br>자기 소개 홈페이지</strong></p>
    </div>
    <div class="simple_int">
      <p>안녕하세요. <br>위코드 8기 김영목입니다.
      <br>광고를 전공했던 <strong><mark>파워 문과인</mark></strong>에서<br>이제 코딩을 배워보려고 합니다.
    </div>
  <!-- 두번째 페이지, 사진과 상세소개-->
    <div class="second">
      <h2>This is me</h2>
      <div class="box"></div>
      <p>부산에서 태어나서 20년을 살다 현재는 서울에서 살고 있습니다. <br>광고 조금 하고 마케팅 조금 하다 이제 코딩을 배워보려고 합니다. <br>자기소개서를 그렇게 많이 썼는데, 여전히 자기소개가 어렵습니다.</p>
    </div>
    <div class="self_int">
      <img src="1.jpg" class="myimg">
      <p><strong>김영목 KIM YOUNG MOK 金榮睦</strong><br><em>1989년생 32살 32-years-old</em><br><span class="hashtag">#영화#드라마#책#음악<br>#넷플릭스#게임#전시<br>#유럽축구#한국야구#NBA<br>#탄수화물#야식#인스턴트<br>#커피#커피#커피#맥주#맥주</span></p>
    </div>
    <div class="third">
      <p><mark>객관적</mark>으로 보면 저는 <mark>이런 사람</mark>이라고 합니다.</mark></p>
    </div>
    <!--mbti 페이지 -->
    <img src="2.jpg" class="mbti-img">
    <div class="mbti">
      <div class="mbtione">INFP 사람들은</div>
      <div class="mbtitwo">
        중재자형 사람은 최악의 상황이나 악한 사람에게서도 좋은 면만을 바라보며 긍정적이고 더 나은 상황을 만들고자 노력하는 진정한 이상주의자입니다. 간혹 침착하고 내성적이며 심지어는 수줍음이 많은 사람처럼 비추어지기도 하지만, 이들 안에는 불만 지피면 활활 타오를 수 있는 열정의 불꽃이 숨어있습니다. 인구의 대략 4%를 차지하는 이들은 간혹 사람들의 오해를 사기도 하지만, 일단 마음이 맞는 사람을 만나면 이들 안에 내재한 충만한 즐거움과 넘치는 영감을 경험할 수 있을 것입니다. 이들은 논리나 단순한 흥미로움, 혹은 인생의 실용적인 부분이 아닌 그들 나름의 원리원칙에 근거하여 사고하고 행동합니다. 더욱이 성취에 따르는 보상이나 그렇지 못할 경우에 생길 수 있는 불이익 여부에 상관없이 순수한 의도로 인생의 아름다움이나 명예 그리고 도덕적 양심과 미덕을 좇으며 나름의 인생을 설계해 나갑니다. 그리고 그러한 본인들의 생각과 행동에 자부심을 느끼기도 합니다.<br><br><a href="https://www.16personalities.com/ko/%EB%AC%B4%EB%A3%8C-%EC%84%B1%EA%B2%A9-%EC%9C%A0%ED%98%95-%EA%B2%80%EC%82%AC" target="_blank">나의 MBTI 알아보기</a>
      </div>
      <div class="mbtithree">
        <mark class="mark-one">잔다르크형</mark>,<mark>이상주의자</mark>,<br><mark class="mark-two">현실감각없음</mark><br>게으름뱅이vs완벽주의</div>
      </div>
    <!-- 좋아하는 것 -->
    <div class="fourth">
      <h2>What I LIke</h2>
      <div class="box"></div>
    </div>
    <div class="like">
      <div class="likezero"><br><br>정말 좋아하는 걸 하나를 꼽는 것은 어렵지만...<br>아주, 매우, 상당히, <mark>대중적인 취향</mark>을 가지고 있습니다.</div>
      <div class="likeone"><a href="https://www.youtube.com/watch?v=wmiIUN-7qhE" target="_blank"><img src="https://www.interview365.com/news/photo/201906/87164_113603_343.jpg"></a></div>
      <div class="liketwo"><a href="https://www.netflix.com/kr/title/80204890" target="_blank"><img src="https://ojsfile.ohmynews.com/STD_IMG_FILE/2019/0318/IE002471183_STD.jpg"></a></div>
      <div class="likethree"><a href="https://www.youtube.com/watch?v=jSfqBQD_C1M&t=249s" target="_blank"><img src="https://post-phinf.pstatic.net/MjAxOTA3MDRfMTU0/MDAxNTYyMjI1MzM0Mjc0.HIVXFMmClQV_MQ1D1SQCzsz76saXvszK8d0QZtkOBlcg.8d1tWJRh7FGAIHWq0jU1Y6ZpJd5ZR08hHjhvtYviqL0g.JPEG/thousand_wooo_64766403_930557073951120_7472856485818052359_n.jpg?type=w1200"></a></div>
      <div class="likefour"><a href="https://www.youtube.com/watch?v=vhkCBOsOoYY" target="_blank"><img src="https://t1.daumcdn.net/movie/60331e56b1964eed9d8a8cf14e2090b91544173283780"></a></div>
      <div class="likefive"><a href="https://www.youtube.com/watch?v=m29lUyODfzk" target="_blank"><img src="https://file.mk.co.kr/meet/neds/2020/03/image_readtop_2020_271294_15843325654124605.jpg"></a></div>
      <div class="likesix"><a href="https://www.netflix.com/kr/title/80057281" target="_blank"><img src="https://t1.daumcdn.net/cfile/tistory/99AB2C395CF731A720"></a></div>
      <div class="likeseven"><a href="https://www.youtube.com/watch?v=CEW-yRtd5r8" target="_blank"><img src="https://image.aladin.co.kr/product/20899/58/cover500/c562831811_1.jpg"></a></div>
      <div class="likeeight"><a href="https://www.youtube.com/watch?v=4HG_CJzyX6A" target="_blank"><img src="https://image.bugsm.co.kr/album/images/500/202401/20240141.jpg"></a></div>
      <div class="likenine"><a href="http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9788932023151&orderClick=LAG&Kc=" target="_blank"><img src="https://lh3.googleusercontent.com/proxy/K-EPVAUxay5nlRNfoCT4MLwd82SCFUhEkkLnIppvETjHJe_U0P1MK9o7HvduYyHNpQXleHdhS67vbtsiMKSRFCZmFG2J70kpN-STXSq6dafHYxj6TKVCT-YF0IIRyLGUs_b9cOJFCuh3oY9If3VtQmMkuKB0w4ZkH5WjWRP0-0vb7eMQvixdGy5U_1t4AS-oor1aLK2Gw4Z9nNfSiuT5AcL-j42cMQGmJ-m5e_QNab9pAM8c5Z1X9vDBaApU-h8tJ57XkEFMcmxH1d5kz0KtvcT7kDGrYbCxJ9YLEA"></a></div>
      <div class="likeeleven"><a href="http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9788970128337&orderClick=LEa&Kc=" target="_blank"><img src="https://mobile.kyobobook.co.kr/common/image/resize?url=http://image.kyobobook.co.kr/images/book/large/337/l9788970128337.jpg"></a></div>
      <div class="liketwelve"><a href="https://comic.naver.com/webtoon/list.nhn?titleId=651673" target="_blank"><img src="https://www.mediasr.co.kr/news/photo/201906/53152_14624_1747.jpg"></a></div>
      <div class="likethirteen"><a href="https://www.youtube.com/watch?v=CKYjsB0ZJ7I" target="_blank"><img src="https://t1.daumcdn.net/cfile/tistory/99781C465A781F2021"></a></div>
      </div>
    <!--마무리 -->
      <div class="last">자기소개를 마치겠습니다.<br>표정이 안 좋을 땐 높은 확률로 체내에 카페인이나 당이 부족한 상태입니다.<br> 사양하지 말고 인사해주세요! 잘 부탁드립니다.
      </div>
  </body>
</html>

전체 CSS

body {
background-color: rgb(255, 255, 255);
}
.first {
font-family: 'Nanum Gothic', sans-serif;
height: 5px;
}
.first p {
font-size: 20px;
padding-top: 5px;
}
.simple_int {
position: relative;
background-color: rgb(244, 244, 244);
width: 100%;
height: 500px;
font-family: 'Nanum Myeongjo', serif;
}
.simple_int p {
font-size: 60px;
padding-top: 100px;
text-align: center;
}
.mark {
background-color: #f0ff00;
font-family: "Nanum Myeongjo", serif;
}
.second p {
font-size: 20px;
font-family: 'Nanum Myeongjo', serif;
text-align: center;
padding-bottom: 80px;
padding-top: 80px;
}
.box {
width: 800px;
height: 100px;
background-color: #f0ff00;
margin-top: -70px;
}
.self_int{
width: 60%;
height: 400px;
background-color: rgb(244, 244, 244);
margin-left: 20%;
}
.self_int p {
font-size: 20px;
width: 500px;
line-height: 60px;
font-family: "Nanum Myeongjo", serif;
color: rgb(40, 44, 52);
text-align: right;
}
.hashtag {
font-size: 25px;
line-height: 40px;
}
.third {
font-size: 30px;
font-family: 'Nanum Myeongjo', serif;
text-align: center;
margin-top: 200px;
}
.myimg {
width: 40%;
height: 400px;
float: right;
}
.mbti-img {
width: 85%;
margin-top: 100px;
margin-left: 100px;
}
h2 {
font-size: 50px;
font-family: 'Nanum Gothic', sans-serif;
font-weight: 900;
}
.mbti {
display: grid;
width: 1500px;
height: 500px;
grid-template: 2fr 2fr 2fr 2fr / 500px 1000px;
}
.mbtione {
grid-column: 1;
grid-row: 1;
font-size: 25px;
font-style: italic;
color: #21252b;
margin-top: 100px;
margin-left: 150px;
font-family: "Nanum Gothic", sans-serif;
text-align: left;
}
.mbtitwo {
grid-row: 1 / 4;
grid-column: 2;
margin-top: 100px;
margin-right: 145px;
font-size: 20px;
color: #21252b;
font-family: "Nanum Myeongjo", serif;
text-align: left;
}
.mbtithree {
grid-column: 1;
grid-row: 2 / 4;
font-family: "Nanum Gothic", sans-serif;
font-size: 25px;
text-align: left;
margin-left: 150px;
line-height: 35px;
}
.mark-one {
background-color: #e0e0e0;
font-size: 25px;
}
.mark-two {
background-color: #21252b;
color: #cecece;
}
.fourth h2 {
text-align: left;
}
.like {
display: grid;
width: 1500px;
height: 800px;
grid-gap: 10px;
background-color: rgb(244, 244, 244);
grid-template: 1fr 1fr 1fr 1fr / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.like img {
width: 100%;
height: 100%;
}
.likezero {
grid-row: 1;
grid-column: 2 / 8;
text-align: center;
font-family: "nanum Myeongjo", serif;
font-size: 30px;
}
.likeone {
grid-row: 2 / 4;
grid-column: 2 / 4;
}
.liketwo {
grid-row: : 2 / 3;
grid-column: 2 / 3;
}
.likethree{
grid-row: 4 / 5;
grid-column: 3 / 4;
background-color: green;
}
.likefour{
grid-row: 2 / 3;
grid-column: 4 / 5;
background-color: blue;
}
.likefive{
grid-row: 2 / 3;
grid-column: 5 /6;
background-color: brown;
}
.likesix{
grid-row: 3 / 5;
grid-column: 4 / 6;
background-color: skyblue;
}
.likeseven{
grid-row: 2 / 3;
grid-column: 6 / 7;
background-color: purple;
}
.likeeight{
grid-row: 2 / 3;
grid-column: 7 / 8;
background-color: cyan;
}
.likenine{
grid-row: 3 / 4;
grid-column: 6 / 7;
background-color: orange;
}
.likeeleven{
grid-row: 3 / 4;
grid-column: 7 / 8;
background-color: pink;
}
.liketwelve{
grid-row: 4 / 5;
grid-column: 6 /7;
background-color: gold;
}
.likethirteen{
grid-row: 4 / 5;
grid-column: 7 / 8;
background-color: navy;
}
.last {
padding-top: 100px;
padding-bottom: 100px;
height: 200px;
font-size: 25px;
font-family: "Nanum Myeongjo", serif;
font-weight: 300;
color: rgb(40, 44, 52);
text-align: center;
}

1. head 부분 리뷰

 <html>
    <head>
      <meta charset="utf-8">
      <title>자기소개 김영목</title>
      <link href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800|Nanum+Myeongjo:400,700,800|Do+Hyeon|Nanum+Brush+Script&display=swap" rel="stylesheet">
      <link rel='stylesheet' type='text/css' href='style.css'>
    </head>

1-1. <.meta> charset Attribute

HTML의 <.meta> 태그 chatset 속성은 해당 HTML 문서의 문자 인코딩 방식을 지정한다.
각각의 HTML 요소의 lang 속성을 사용하면, 요소의 charset 속성으로 명시한 문자 인코딩 방식을 재정의 할 수 있다.

<meta charset="charactor_set">

Attribute Values
UTF-8 : 유니코드를 위한 문자 인코딩
ISO-8859-1 : 라틴 알파벳의 문자 인코딩

1-2 폰트 사용(Liinking Fonts)

공개용으로 만들어진 디렉토리에 폰트가 모여있다.(이러한 폰트를 non-user fonts)
이를 통해 사용자들이 페이지를 올바르게 보기 위해, 각자의 컴퓨터 모든 폰트를 설치해야하는 문제를 해결할 수 있다.
대표적인 무료 디렉토리로는 구글 폰트가 있으며 이곳에서 폰트의 링크를 갖게 되면 HTML 문서의 head 부분에서 폰트를 추가할 수 있다.

[CSS]typography 참조(https://velog.io/@mokyoungg/CSS-CSS-Typography)

2. body 태그의 class=first/second 부분

이 부분뿐만 아니라 거의 모든 부분에서 페이지 레이아웃을 위해 여러 태그들과 속성이 오남용 되었다.

<div class="first">
  <p><strong>wecode 8기 김영목<br>자기 소개 홈페이지</strong></p>
</div>
<div class="simple_int">
  <p>안녕하세요. <br>위코드 8기 김영목입니다.
  <br>광고를 전공했던 <strong><mark>파워 문과인</mark></strong>에서<br>이제 코딩을 배워보려고 합니다.
</div>
<div class="second">
  <h2>This is me</h2>
  <div class="box"></div>
  <p>부산에서 태어나서 20년을 살다 현재는 서울에서 살고 있습니다. <br>광고 조금 하고 마케팅 조금 하다 이제 코딩을 배워보려고 합니다. <br>자기소개서를 그렇게 많이 썼는데, 여전히 자기소개가 어렵습니다.</p>
</div>

2-1. div 와 p 태그의 무분별한 활용

div 태그와 p태그의 정확한 쓰임새를 알아두어야 할 필요가 있다.

  • div 태그는 Division의 약자로, 레이아웃을 나누는데 주로 쓰인다.
    다른 태그와 다르게 특별한 기능을 갖고 있지는 않고, 가상의 레이아웃을 설계하는데 쓰이며 주로 CSS와 연동하여 쓰인다.
  • p 태그는 paragraph의 약자로, 즉 문단의 약자로 하나의 문단을 만들 때 쓰인다.

div 태그 안에 있는 내용을 쓰기 위해 p태그를 썼다. 굳이 써야했나?

아래의 코드는 class=first/second 부분을 꾸미기 위해 사용한 CSS 이다.

.first {
font-family: 'Nanum Gothic', sans-serif;
height: 5px;
}
.first p {
font-size: 20px;
padding-top: 5px;
}
.simple_int {
position: relative;
background-color: rgb(244, 244, 244);
width: 100%;
height: 500px;
font-family: 'Nanum Myeongjo', serif;
}
.simple_int p {
font-size: 60px;
padding-top: 100px;
text-align: center;
}
.mark {
background-color: #f0ff00;
font-family: "Nanum Myeongjo", serif;
}
.second p {
font-size: 20px;
font-family: 'Nanum Myeongjo', serif;
text-align: center;
padding-bottom: 80px;
padding-top: 80px;
}
.box {
width: 800px;
height: 100px;
background-color: #f0ff00;
margin-top: -70px;
}

2-2. margin 과 padding

div로 나누어진 레이아웃의 위치를 수정하기 위해 margin과 padding 속성을 사용하였다. 미리 고려하고 사용한 것이 아닌, 속성의 값에 따라 변하는 페이지의 상황을 보며 마구잡이로 고쳤다.
CSS 기본 박스 모델에 대한 정확한 이해가 필요하다.

문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현. CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정한다.

하나의 박스는 네 부분(영역)으로 이루어진다. 각 영역을 콘텐츠 영역, 안쪽 여백(패딩) 영역, 테두리 영역, 그리고 바깥 여백(마진) 영역이다.

콘텐츠 영역

콘텐츠 영역은 콘텐츠 경계가 감싼 영역으로, 글이나 이미지, 비디오 등 요소의 실제 내용을 포함한다. 콘텐츠 영역의 크기는 콘텐츠 너비와 콘텐츠 높이이다. 배경색과 배경 이미지를 가지고 있기도 하다.
box-sizing 속성의 값이 기본값인 content-box인 경우, 콘텐츠 영역의 크기를 width, min-width, max-width, height, min-height, max-height 속성을 사용해 명시적으로 설정할 수 있다.

패딩 영역

안쪽 여백 영역(패딩)은 안쪽 여백 경계가 감싼 영역으로, 콘텐츠 영역을 요소의 안쪽 여백까지 포함하는 크기로 확장한다.
영역의 크기는 안쪽 여백 박스 너비와 안쪽 여백 박스 높이이다. 안쪽 여백의 두꼐는 padding-top, padding-right, padding-botton, padding-left와 단축 속성인 padding이 결정한다.

테두리 영역

테두리 영역은 테두리 경계가 감싼 영역으로, 안쪽 여백 영역요소의 테두리까지 포함하는 크기로 확장한다. 영역의 크기는 테두리 박스 너비와 박스 높이다. 테두리의 두께는 borde-width와 단축 속성인 border가 결정한다.

box-sizing 속성의 값이 border-box라면 테두리 영역의 크기를 width, min-width, max-widthn, height, min-heignt, max-height 속성을 사용해 명시적으로 설정할 수 있다. 박스의 배경(background-color 또는 background-image)은 테두리의 바깥 경계까지 늘어나고, 그럴 땐 테두리에 가려진다. 이 동작 방식은 background-clip 속성으로 바꿀 수 있다.

마진 영역

바깥 여백 영역(마진)dms 바깥 여백 경계가 감싼 영역으로, 테두리 요소를 확장해 요소와 인근 요소 사이의 빈 공간까지 포함하도록 만든다.
영역의 크기는 바깥 여백 박스 너비와 바깥 여백 박스 높이이다. 바깥 여백 영역의 크기는 margin-top, margin-right, margin-bottom, margin-left와 단축 속성인 margin이 결정한다. 여백 상쇄가 발생할 때는 요소 간에 바깥 여백이 공유되므로 여백 영역이 명확하게 결정되지 않는다.

참고 URL
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

2-3 position 속성

margin, padding과 마찬가지로 페이지의 레이아웃, 콘텐츠의 위치 설정을 위해 사용하였으나 정확한 사용에는 실패하였다.

position 속성의 내용은 다음과 같다.
CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정한다.
top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정한다.

배치 유형

  • 위치 지정 요소란 position의 value 값이 realative, absolute, fixed, sticky 중 하나인 요소이다. (즉, static이 아닌 모든 요소를 말함)
  • 상대 위치 지정 요소는 position의 value 값이 relatvie인 요소. top과 bottom은 원래 위치에서의 세로축 거리를, left와 right은 원래 위치에서의 가로축 거리를 지정.
  • 절대 위치 지정 요소는 position의 value 값이 absolute 또는 fixed 인 요소이다. top, right, bottom, left는 요소의 컨테이닝 블록(위치의 기준점이 되는 조상 요소)
    모서리로부터의 거리를 지정한다. 요소가 바깥 여백을 가진다면 거리에 더해짐. 절대 위치 지정 요소는 새로운 블록 서식 맥락을 생성한다.
  • 끈끈한 위치 지정 요소는 position의 계산 값이 sticky인 요소. 평소에는 상대 위치 지정 요소로 처리하지만, 컨테이닝 블록이 자신의 플로우 루트(또는, 스크롤 컨테이너)에서 지정한 임계값(top 등으로 지정)을 넘으면 마치 fixed 처럼 화면에 고정.
    고정상태는 컨테이닝 블록의 반대편 모서리를 만나면 해제된다.

내용을 봐도 무슨 말인지 이해가 안 되니 참조 사이트의 예시를 봐야한다.
https://developer.mozilla.org/ko/docs/Web/CSS/position

2-4 mark 태그 사용

텍스트에 형광펜 효과를 위해 사용되었다.

<mark>형광펜 효과</mark>

2-5 linkin fonts의 사용

html

 <link href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800|Nanum+Myeongjo:400,700,800|Do+Hyeon|Nanum+Brush+Script&display=swap" rel="stylesheet">

style
p {
font-family: 'Nanum Gothic', sans-serif;
}

font-family 속성에서 fonts의 이름과 함께 ,serif(or sans-serif)를 써야함.

3. class self-int와 third 부분

html 

<div class="self_int">
  <img src="1.jpg" class="myimg">
  <p><strong>김영목 KIM YOUNG MOK 金榮睦</strong><br><em>1989년생 32살 32-years-old</em><br><span class="hashtag">#영화#드라마#책#음악<br>#넷플릭스#게임#전시<br>#유럽축구#한국야구#NBA<br>#탄수화물#야식#인스턴트<br>#커피#커피#커피#맥주#맥주</span></p>
</div>
<div class="third">
  <p><mark>객관적</mark>으로 보면 저는 <mark>이런 사람</mark>이라고 합니다.</mark></p>
</div>

CSS

self_int{
width: 60%;
height: 400px;
background-color: rgb(244, 244, 244);
margin-left: 20%;
}
.self_int p {
font-size: 20px;
width: 500px;
line-height: 60px;
font-family: "Nanum Myeongjo", serif;
color: rgb(40, 44, 52);
text-align: right;
}
.hashtag {
font-size: 25px;
line-height: 40px;
}
.third {
font-size: 30px;
font-family: 'Nanum Myeongjo', serif;
text-align: center;
margin-top: 200px;
}
.myimg {
width: 40%;
height: 400px;
float: right;
}
h2 {
font-size: 50px;
font-family: 'Nanum Gothic', sans-serif;
font-weight: 900;

3-1 span 태그 사용

같은 레이아웃안에 있는 콘텐츠에서 한 부분을 따로 꾸미기 위해 사용하였다.

HTML span 요소는 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않는다. 스타일을 적용하기 위해서, 또는 lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있다.
적절한 의미를 가진 다른 요소가 없을 때에만 사용해야함.
span은 div와 매우 유사하지만, div는 블록 레벨 요소인 반면 span은 인라인 요소

3-2. float

앞에서 사용한 div, p, padding, margin 처럼 페이지 레이아웃을 위해 사용했으나 정확하게 사용하지 못 하였다.

CSS 속성 float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정한다.

값

  • left : 요소가 자신을 포함하는 블록의 좌측에 부동(float, 떠움직여)해야 함을 나타냄.
  • right: 요소가 자신을 포함하는 블록의 우측에 부동.
  • none: 요소가 부동하지 않아야 함을 나타냄.
  • inline-start: 요소가 자신을 포함하는 블록의 시작쪽에 부동해야 함을 나타냄.
  • inline-end: 요소가 자신을 포함하는 블록의 끝쪽에 부동해야 함을 나타냄.

https://developer.mozilla.org/ko/docs/Web/CSS/float

3-3. h2 태그

텍스트의 위치, 크기를 위해 h2 태그를 사용하였다. 굳이 쓸 필요가 없는데 사용되었다.(class를 통해 묶어서 같은 스타일을 주어도 됨)

4. class=mbti 부분

html

<img src="2.jpg" class="mbti-img">
<div class="mbti">
  <div class="mbtione">INFP 사람들은</div>
  <div class="mbtitwo">
    중재자형 사람은 최악의 상황이나 악한 사람에게서도 좋은 면만을 바라보며 긍정적이고 더 나은 상황을 만들고자 노력하는 진정한 이상주의자입니다. 간혹 침착하고 내성적이며 심지어는 수줍음이 많은 사람처럼 비추어지기도 하지만, 이들 안에는 불만 지피면 활활 타오를 수 있는 열정의 불꽃이 숨어있습니다. 인구의 대략 4%를 차지하는 이들은 간혹 사람들의 오해를 사기도 하지만, 일단 마음이 맞는 사람을 만나면 이들 안에 내재한 충만한 즐거움과 넘치는 영감을 경험할 수 있을 것입니다. 이들은 논리나 단순한 흥미로움, 혹은 인생의 실용적인 부분이 아닌 그들 나름의 원리원칙에 근거하여 사고하고 행동합니다. 더욱이 성취에 따르는 보상이나 그렇지 못할 경우에 생길 수 있는 불이익 여부에 상관없이 순수한 의도로 인생의 아름다움이나 명예 그리고 도덕적 양심과 미덕을 좇으며 나름의 인생을 설계해 나갑니다. 그리고 그러한 본인들의 생각과 행동에 자부심을 느끼기도 합니다.<br><br><a href="https://www.16personalities.com/ko/%EB%AC%B4%EB%A3%8C-%EC%84%B1%EA%B2%A9-%EC%9C%A0%ED%98%95-%EA%B2%80%EC%82%AC" target="_blank">나의 MBTI 알아보기</a>
  </div>
  <div class="mbtithree">
    <mark class="mark-one">잔다르크형</mark>,<mark>이상주의자</mark>,<br><mark class="mark-two">현실감각없음</mark><br>게으름뱅이vs완벽주의</div>
  </div>

css

.mbti {
display: grid;
width: 1500px;
height: 500px;
grid-template: 2fr 2fr 2fr 2fr / 500px 1000px;
}
.mbtione {
grid-column: 1;
grid-row: 1;
font-size: 25px;
font-style: italic;
color: #21252b;
margin-top: 100px;
margin-left: 150px;
font-family: "Nanum Gothic", sans-serif;
text-align: left;
}
.mbtitwo {
grid-row: 1 / 4;
grid-column: 2;
margin-top: 100px;
margin-right: 145px;
font-size: 20px;
color: #21252b;
font-family: "Nanum Myeongjo", serif;
text-align: left;
}
.mbtithree {
grid-column: 1;
grid-row: 2 / 4;
font-family: "Nanum Gothic", sans-serif;
font-size: 25px;
text-align: left;
margin-left: 150px;
line-height: 35px;
}
.mark-one {
background-color: #e0e0e0;
font-size: 25px;
}
.mark-two {
background-color: #21252b;
color: #cecece;
}

4-1. Grid

이것 역시 페이지의 레이아웃을 위해 사용되었지만, 정확한 이해가 부족하다. 아마 행과 열을 저 정도로 잡지 않아도 같은 결과를 낼 수 있을 것이다. 아직도 row와 column을 조작하여 원하는 결과를 내는 것에 익숙하지 않다.

블로그에 썼으면 공부를 좀 해야한다.
https://velog.io/@mokyoungg/CSS-CSS-Grid-Essentials

5. class fourth, like, last 부분

html

<div class="fourth">
  <h2>What I LIke</h2>
  <div class="box"></div>
</div>
<div class="like">
  <div class="likezero"><br><br>정말 좋아하는 걸 하나를 꼽는 것은 어렵지만...<br>아주, 매우, 상당히, <mark>대중적인 취향</mark>을 가지고 있습니다.</div>
  <div class="likeone"><a href="https://www.youtube.com/watch?v=wmiIUN-7qhE" target="_blank"><img src="https://www.interview365.com/news/photo/201906/87164_113603_343.jpg"></a></div>
  <div class="liketwo"><a href="https://www.netflix.com/kr/title/80204890" target="_blank"><img src="https://ojsfile.ohmynews.com/STD_IMG_FILE/2019/0318/IE002471183_STD.jpg"></a></div>
  <div class="likethree"><a href="https://www.youtube.com/watch?v=jSfqBQD_C1M&t=249s" target="_blank"><img src="https://post-phinf.pstatic.net/MjAxOTA3MDRfMTU0/MDAxNTYyMjI1MzM0Mjc0.HIVXFMmClQV_MQ1D1SQCzsz76saXvszK8d0QZtkOBlcg.8d1tWJRh7FGAIHWq0jU1Y6ZpJd5ZR08hHjhvtYviqL0g.JPEG/thousand_wooo_64766403_930557073951120_7472856485818052359_n.jpg?type=w1200"></a></div>
  <div class="likefour"><a href="https://www.youtube.com/watch?v=vhkCBOsOoYY" target="_blank"><img src="https://t1.daumcdn.net/movie/60331e56b1964eed9d8a8cf14e2090b91544173283780"></a></div>
  <div class="likefive"><a href="https://www.youtube.com/watch?v=m29lUyODfzk" target="_blank"><img src="https://file.mk.co.kr/meet/neds/2020/03/image_readtop_2020_271294_15843325654124605.jpg"></a></div>
  <div class="likesix"><a href="https://www.netflix.com/kr/title/80057281" target="_blank"><img src="https://t1.daumcdn.net/cfile/tistory/99AB2C395CF731A720"></a></div>
  <div class="likeseven"><a href="https://www.youtube.com/watch?v=CEW-yRtd5r8" target="_blank"><img src="https://image.aladin.co.kr/product/20899/58/cover500/c562831811_1.jpg"></a></div>
  <div class="likeeight"><a href="https://www.youtube.com/watch?v=4HG_CJzyX6A" target="_blank"><img src="https://image.bugsm.co.kr/album/images/500/202401/20240141.jpg"></a></div>
  <div class="likenine"><a href="http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9788932023151&orderClick=LAG&Kc=" target="_blank"><img src="https://lh3.googleusercontent.com/proxy/K-EPVAUxay5nlRNfoCT4MLwd82SCFUhEkkLnIppvETjHJe_U0P1MK9o7HvduYyHNpQXleHdhS67vbtsiMKSRFCZmFG2J70kpN-STXSq6dafHYxj6TKVCT-YF0IIRyLGUs_b9cOJFCuh3oY9If3VtQmMkuKB0w4ZkH5WjWRP0-0vb7eMQvixdGy5U_1t4AS-oor1aLK2Gw4Z9nNfSiuT5AcL-j42cMQGmJ-m5e_QNab9pAM8c5Z1X9vDBaApU-h8tJ57XkEFMcmxH1d5kz0KtvcT7kDGrYbCxJ9YLEA"></a></div>
  <div class="likeeleven"><a href="http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9788970128337&orderClick=LEa&Kc=" target="_blank"><img src="https://mobile.kyobobook.co.kr/common/image/resize?url=http://image.kyobobook.co.kr/images/book/large/337/l9788970128337.jpg"></a></div>
  <div class="liketwelve"><a href="https://comic.naver.com/webtoon/list.nhn?titleId=651673" target="_blank"><img src="https://www.mediasr.co.kr/news/photo/201906/53152_14624_1747.jpg"></a></div>
  <div class="likethirteen"><a href="https://www.youtube.com/watch?v=CKYjsB0ZJ7I" target="_blank"><img src="https://t1.daumcdn.net/cfile/tistory/99781C465A781F2021"></a></div>
</div>
<!--마무리 -->
  <div class="last">자기소개를 마치겠습니다.<br>표정이 안 좋을 땐 높은 확률로 체내에 카페인이나 당이 부족한 상태입니다.<br> 사양하지 말고 인사해주세요! 잘 부탁드립니다.
  </div>

css

.fourth h2 {
text-align: left;
}
.like {
display: grid;
width: 1500px;
height: 800px;
grid-gap: 10px;
background-color: rgb(244, 244, 244);
grid-template: 1fr 1fr 1fr 1fr / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.like img {
width: 100%;
height: 100%;
}
.likezero {
grid-row: 1;
grid-column: 2 / 8;
text-align: center;
font-family: "nanum Myeongjo", serif;
font-size: 30px;
}
.likeone {
grid-row: 2 / 4;
grid-column: 2 / 4;
}
.liketwo {
grid-row: : 2 / 3;
grid-column: 2 / 3;
}
.likethree{
grid-row: 4 / 5;
grid-column: 3 / 4;
background-color: green;
}
.likefour{
grid-row: 2 / 3;
grid-column: 4 / 5;
background-color: blue;
}
.likefive{
grid-row: 2 / 3;
grid-column: 5 /6;
background-color: brown;
}
.likesix{
grid-row: 3 / 5;
grid-column: 4 / 6;
background-color: skyblue;
}
.likeseven{
grid-row: 2 / 3;
grid-column: 6 / 7;
background-color: purple;
}
.likeeight{
grid-row: 2 / 3;
grid-column: 7 / 8;
background-color: cyan;
}
.likenine{
grid-row: 3 / 4;
grid-column: 6 / 7;
background-color: orange;
}
.likeeleven{
grid-row: 3 / 4;
grid-column: 7 / 8;
background-color: pink;
}
.liketwelve{
grid-row: 4 / 5;
grid-column: 6 /7;
background-color: gold;
}
.likethirteen{
grid-row: 4 / 5;
grid-column: 7 / 8;
background-color: navy;
}
.last {
padding-top: 100px;
padding-bottom: 100px;
height: 200px;
font-size: 25px;
font-family: "Nanum Myeongjo", serif;
font-weight: 300;
color: rgb(40, 44, 52);
text-align: center;
}

5-1. grid

이 부분에서도 레이아웃을 위해 grid를 사용하였다. 앞부분과 다른 점이 있다면 그리드 내부에 들어갈 콘텐츠의 위치를 확인하기 위해, 사전에 그리드의 각 클래스마다(like zero~likethirteen) 색을 주어 정확한 위치를 파악하였다. 다행히 뇌를 썼다.

5-2. class name

뇌를 쓰는 것에 실패한 사례가 있다. grid의 클래스를 likezero부터 likethiteen까지 만드는 것은 좋았지만 중간에 liketen이 없다는 것을 알 수 있다. 이는 liketen 클래스가 css에서 꾸며지지 않았기 때문이다. 아직도 정확한 이유를 모르겠다. 다른 태그나 클래스와 충돌이 있었을까. 페이지가 커질수록 class 이름 짓기는 매우 중요할 것 같다.

5-3. CSS selector

뇌 사용 실패의 다른 사례로는, 페이지를 만드는 중 지정한 class가 css를 통해 꾸며지지 않은 경우가 몇 번 있었다. 나는 올바른 css selector 사용을 하고 있는가.

참조
https://translate.google.com/translate?hl=ko&sl=en&u=https://www.w3schools.com/cssref/css_selectors.asp&prev=search

REVIEW

페이지의 레이아웃을 위해 주먹구구식으로 사용된 태그와 속성이 많았다.
페이지를 만드는 과정에서 예상과는 다른 결과가 나온 경우도 많았다.
뿐만 아니라, 들여쓰기가 깔끔하지 못 했고 codecademy에서 배운 HTML5 의미 요소를 이용하여 레이아웃을 만들지 않고 div 태그만 사용하였다.
(참조 http://www.devkuma.com/books/pages/339)
마지막으로, footer 태그를 사용하지 않았고 git 역시 활용하지 못하였다.

  • css 박스모델과 position, float 등의 속성에 대한 이해가 필요하다.
  • grid의 raw와 col 설정에 따른 결과를 예측할 수 있어야 한다.
  • 정확한 CSS selector를 공부해야 한다.
  • class name은 계획적으로 만들어야 한다.
profile
mokyoungg
생경하다.
이전 포스트

[Mini Project] 홈페이지 만들기(0326)

다음 포스트

[miniP] JS 실습(조건문으로 글자색 바꾸기)

0개의 댓글