HTML 훈련 - (7) Instagram User profile

Instagram User profile

instagram user profile

 

 

마크업을 위해서 img 태그 / 내용 부분을 나눠서 어떤 태그로 나타낼지 구상해보자.

 

 

<dl>태그에 대한 내용을 다시한번 복습해보려면?

 

---

정의 리스트 Description List (dl)

<dl>은 중요하지 않게 생각할 수 있는데, 굉장히 유용한 리스트임.

 

1. 용어를 정의할 때 

Syntax

<dl>
      <dt>학습(學習)</dt>
      <dd>
        1. 배워서 익힘.
      </dd>
      <dd>
        2. 험의 결과로 나타나는, 비교적 지속적인 행동의 변화나
        그 잠재력의 변화. 또는 지식을 습득하는 과정.
      </dd>
</dl>

 

● dt =  discription Term

● dd = discription Data

 

** dt 대신 dfn(definition)을 사용하기도 함.

- [정의]를 할거라는 늬앙스의 의미임.

 

 

- 하나의 term에 여러개의 data 가능.

- 여러개의 term을 연속해서 적고, 그에 대한 설명을 적으면 ?

thisisyjin과 injung을 일종의 그룹핑하듯이 둘은 비슷한 의미임을 나타냄.

 

예제>

<dl>
      <dt>thisisyjin</dt>
      <dd>
        <a href="https://mywebproject.tistory.com/">1. web log</a>
      </dd>
      <dd>
        <a href="https://blog.naver.com/hnesb970">2. v-log blog</a>
      </dd>
</dl>

 

 

 

2. key - value 형태로 정보를 제공할 때

 

{ key : value }

- js에서 object에서도 위와 같이 사용한다.

ex> 이름 :    thisisyjin 직업 :    웹개발자 나이 :     22 [ key ]  [ value ]

 

<div>를 사용한 그룹핑 예제>

<dl>
      <div>
        <dt>thisisyjin</dt>
        <dd>my tistory</dd>
      </div>

      <div>
        <dt>injung</dt>
        <dd>my blog</dd>
      </div>
</dl>

총 두개의 term에 대해 설명하고 있다.

(thisisyjin, injung)

보기좋게 하기 위해서 div태그로 감싸준 것.

 

 

---

좋지 않은 <dl>의 예시.

 

 

1.

<dl>
      <dt>WEB</dt>
      <dd>html</dd>
      <dd>css</dd>
      <dt>Programming</dt>
</dl>

dt를 두개 이상 사용시, 반드시 term에 해당하는 data가 꼭 있어야 하는데,

위 코드에서 Programming이라는 term에 대한 데이터가 없으므로 안좋은 코드이다.

 

 

2. 

<dl>
      <section>
        <dt>WEB LOG</dt>
        <dd>tistory url</dd>
      </section>
        
      <section>
        <dt>v-log MEMO</dt>
        <dd>blog url</dd>
      </section>
</dl>

dl 태그의 자식 태그가 될 수 있는 태그는 오로지

<dt>, <dd>, <div>밖에 없다.

 * section 등은 사용할 수 없다.

 

 

3.

dt, dd 모두 다 단독적으로 <dl>없이 사용할 수는 없다.

---

 

 

• 이미지 태그는 유저의 프로필이므로 css가 아닌 img태그로 / 
• 유저 아이디는 가장 큰 제목에 해당하므로, h1태그를 이용함

 

<img src="https://instagram.fkul10-1.fna.fbcdn.net/vp/59a2c1304ba02593c35328e5990dd980/5E6731EA/t51.2885-19/s320x320/67069331_474838409740202_7787675159699128320_n.jpg?_nc_ht=instagram.fkul10-1.fna.fbcdn.net" 
    alt="_kimbug">


<h1>_kimbug</h1>

 

___

 

• post / followers / following 부분은 모두 key-value 형태로 되어있으므로 dl을 이용하자.

단, 예제에서는 112 post | 274 followers | 238 following 과 같은 순서로 되어있지만,

'의미'적으로 보았을 때는 post, followers, following과 같은 값들이 dt (discription term)에 해당하고

숫자값들은 dd (discription data)에 해당한다.

 

-> 추후에 CSS로 순서를 바꿔주면 되므로 이렇게 하자.

 

 <dl>
        <div>
            <dt>post</dt>
            <dd>112</dd>
        </div>
        <div>
            <dt>followers</dt>
            <dd>274</dd>         
        </div>
        <div>
            <dt>following</dt>
            <dd>238</dd>          
        </div>      
</dl>

** dl은 반드시 dt,dd가 한쌍씩 하위 요소로 와야하고, div도 하위요소로 올 수 있다.

 

-> 각 부분을 나눠주기 위해 div로 묶어줌.

 

 

 

 

___

 

 

• 이름(우현) = 유저명을 h1으로 처리했으므로 이 부분은 h2로 처리한다.
• 바이오 (소개) = p태그
• 유튜브 URL 링크 = anchor 태그

 

<h2>우현</h2>

<p>
        김버그 #frontend #구독 #디지털노마드 🇰🇷🇯🇵🇳🇿🇨🇦🇨🇳🇩🇪🇮🇹🇨🇿🇦🇹🇵🇾🇧🇷🇺🇸🇬🇧🇮🇳🇹🇭🇹🇼🇻🇳🇲🇾🇸🇬🚩
</p>

<a href="https://www.youtube.com/c/kimbug">youtube.com/c/kimbug</a>

 

 

___

 

• 사진에서 볼 수 있듯이, 예제는 크게 두 섹션으로 나눌 수 있다. 좌우로 나누면 크게 두 덩어리로 나뉘기 때문에
• img태그 부분과 그 외 부분으로 div로 섹션을 나눠준다.

 

 

 

<div class="user-profile">
     
        <div class="user-profile-data">
            <h1>_kimbug</h1>
    
            <dl>
                <div>
                    <dt>post</dt>
                    <dd>112</dd>
                </div>
                <div>
                    <dt>followers</dt>
                    <dd>274</dd>         
                </div>
                <div>
                    <dt>following</dt>
                    <dd>238</dd>          
                </div>      
            </dl>
    
            <h2>우현</h2>
    
            <p>
                김버그 #frontend #구독 #디지털노마드 🇰🇷🇯🇵🇳🇿🇨🇦🇨🇳🇩🇪🇮🇹🇨🇿🇦🇹🇵🇾🇧🇷🇺🇸🇬🇧🇮🇳🇹🇭🇹🇼🇻🇳🇲🇾🇸🇬🚩
            </p>
            <a href="https://www.youtube.com/c/kimbug">youtube.com/c/kimbug</a>
    
        </div>


        <div class="user-profile-photo">
            <img src="https://avatars.githubusercontent.com/u/19285811?v=4" alt="_kimbug">
        </div>

 </div>

이때, 이미지부분은 html상으로는 h1 다음에 오는것이 좋으므로 아래에다가 적어줌.

-> 추후 css를 활용해서 순서를 바꿔주면 됨.

 

 

** 핵심 **

마크업을 할 때는 의미 전달에 우선 중점을 두자.

즉, 정보의 중요도를 잘 파악해서 마크업하자.

 

-> dt의 경우에도 key값을 나타내는 것 이므로 대문자로 작성하고,

css로 소문자로 변경해서 출력되도록 하는 것이 좋음.

 

<dl>
    <div>
        <dt>Posts</dt>
        <dd>112</dd>
    </div>
    <div>
        <dt>Followers</dt>
        <dd>274</dd>         
    </div>
    <div>
        <dt>Following</dt>
        <dd>238</dd>          
    </div>      
</dl>

 

 

---

 

 

 

최종 결과

** 강의에 올라온 사진이 깨져서 github 프로필로 대체함. 

cr: https://github.com/rohjs

rohjs - Overview

 

 

 

 

 

style.css에 대한 코드 분석은 다음 포스팅에서.

https://mywebproject.tistory.com/103

html_pr07) style.css Code Review

 

---

 

 

REFERENCE (style.css)

https://github.com/rohjs/bugless-101/blob/master/html-practice/07-instagram-user-profile/styles.css

 

https://edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4

김버그의 HTML&CSS는 재밌다 - 구름EDU