사이즈를 줄일때 우측위 아이콘이 topNav를 넘어가는 경우가 발생.

또 컨텐츠부분이 배경색과 같다는걸 발견하고 고침

사진1

또한 사이즈를 줄였을때 로고가 검색창에 가려지는것을 발견

사진2

내가 로고부분을 잘라서 캡쳐한게 아니라 실제로 이렇게 짤려보임

 

고친 사진

검색창이 어느순간 사라지고 로고는 움직이지 않게 됨..
컨텐츠 background-color또한 흰색으로 바꿈..

 

타이틀 이미지

title 이미지 또한 넣음. 왼쪽이 내가 만든 사이트 오른쪽이 "진짜" 인스타그램 사이트
(혹시나 저작권이라던가 몬가 때문에 똑같으면 안될거같아서 사이트이름 바꿀까 고민중...)

암튼 여까지 얼추 완성된거같음... 저 아이콘들이 작동하는것까지 짬짬히 해볼까도 생각은 하고있지만 공부할게 너무 많다..
(솔직히 롤도 조금은 해야하자너 ㅋㅋ;;;;;;;)

 

암튼 여까지 완성본... 보러와주세용..

kojoo112.github.io/Instagram-clone.github.io/

 

Instagram

burnout_Cat bright_cat님이 팔로우 합니다.

kojoo112.github.io

 

'프론트엔드 > HTML5' 카테고리의 다른 글

Instagram 클론해보기 (HTML, CSS)  (0) 2021.01.27
HTML 표 만들기@@@@@@@@@(<table>)  (1) 2021.01.20

 

인스타그램 페이지를 만들어 봤습니다.

사진은 우선 갖고있는 고영희의 사진을 사용했고 아이콘은 fontawesome에서 갖다 썻습니다.

 

더 해야하는건 오른쪽 "회원님을 위한 추천"밑에 몇가지 계정을 더 만들고 스크롤해도 고정시켜야합니다.

몇가지 완전하게는 아직 못했지만 시간나면 틈틈히 조금씩이라도 수정할까 함...

 

kojoo112.github.io/Instagram-clone.github.io/

 

Instagram

 

kojoo112.github.io

여기가면 볼 수 있음 ㅎ.ㅎ

'프론트엔드 > HTML5' 카테고리의 다른 글

수정  (2) 2021.02.02
HTML 표 만들기@@@@@@@@@(<table>)  (1) 2021.01.20

표 만드는게 어렵게 느껴질수 있지만 우리는 언제나 그렇듯 답을 찾을것입니다.
국비충의 유쾌한 반란을 시작해보겠습니다.

 

무시무시하게 생겼다

 

 

 

우선 간단히 html:5를 입력해 엔터를 누르면

 

짜쟌 -!

 

기본양식이 나옵니다. 2열에서 <html lang="ko">로 바꾸고 다른건 건들것도 없습니다 <body></body>사이에 우리가 만들고자하는걸 코드로 입력하면 웹브라우저를통해 볼 수 있습니다.

<table border="1">
        <tr>	<!-- 1행 -->
            <th colspan="6">전국 군 이름</th>
        </tr>
        <tr>	<!-- 2행 -->
            <th rowspan="3">경기도</th>
            <td>가평군</td>
            <th rowspan="3">충청북도</th>
            <td>괴산군</td>
            <th rowspan="4">경상북도</th>
            <td>고령군</td>
        </tr>
        <tr>	<!-- 3행 -->
            <td>양평군</td>
            <td>보은군</td>
            <td>울릉군</td>
        </tr>
        <tr>	<!-- 4행 -->
            <td>연천군</td>
            <td>진천군</td>
            <td>청송군</td>
        </tr>
        <tr>	<!-- 5행 -->
            <th rowspan="4">강원도</th>
            <td>고성군</td>
            <th rowspan="3">전라북도</th>
            <td>고창군</td>
            <td>봉화군</td>
        </tr>
        <tr>	<!-- 6행 -->
            <td>양구군</td>
            <td>완주군</td>
            <th rowspan="5">경상남도</th>
            <td>고성군</td>
        </tr>
        <tr>	<!-- 7행 -->
            <td>정선군</td>
            <td>진안군</td>
            <td>창녕군</td>
        </tr>
        <tr>	<!-- 8행 -->
            <td>철원군</td>
            <th rowspan="3">전라남도</th>
            <td>강진군</td>
            <td>하동군</td>
        </tr>
        <tr>	<!-- 9행 -->
            <th rowspan="2">충청남도</th>
            <td>금산군</td>
            <td>완도군</td>
            <td>산청군</td>
        </tr>
        <tr>	<!-- 10행 -->
            <td>부여군</td>
            <td>신안군</td>
            <td>의령군</td>
        </tr>
    </table>

 

<table border="1">는 주변 테두리에 줄을 긋는 겁니다. 저는 표만들때 반드시 쓰고 시작하는데 그래야 보기 편하기 때문입니다.

 

----------*** 중요***-----------
<tr> table row -> row(행)에 들어갈 요소를 적는것
<td> table data -> column(열)에 들어갈 요소를 적는것
<th> table head로 td와 같지만 다른점은 글자가 굵어지는정도

<tr>은 이해하기 쉽지만 <td>와 <th>가 헷갈릴수있는데 별거 없습니다.
<th>나 <td> 같은 역할이지만 <h1>, <h2>처럼 글자의 스타일이 다르다정도로만 생각하면될것같아요
(행 방향으로 진행된다는게 같음 다만, th는 bold체인게 디폴트)

 

colspan="숫자" -> 행 방향으로 포함하는 표의 갯수
rowspan="숫자" -> 열 방향으로 포함하는 표의 갯수

 

<tr>
	<th colspan="6">전국 군 이름</th>
</tr>

 

처음 코드를 예로보면
<tr> </tr> 사이에 <th> -> "전국 군 이름"이 1행에서 6열을 포함하겠다 는것

<tr>
    <th rowspan="3">경기도</th>
    <td>가평군</td>
    <th rowspan="3">충청북도</th>
    <td>괴산군</td>
    <th rowspan="4">경상북도</th>
    <td>고령군</td>
</tr>

 

<tr>이 또 나왔는데 2행에 들어가는 요소라는것
<th>는 글자 굵은것, <td>는 normal한 글자

"경기도"는 2열로부터 3개의 열까지 포함하겠다(2, 3, 4)
"가평군"은 2열 2행에 들어가는 요소
"충청북도"는 2열로부터 3개의 열까지 포함하겠다(2, 3, 4)
"괴산군"은 2열 4행에 들어가는 요소
"경상북도"는 2열로부터 4개의 열까지 포함하겠다(2, 3 , 4, 5)
"고령군"은 2열 6행에 들어가는 요소

'프론트엔드 > HTML5' 카테고리의 다른 글

수정  (2) 2021.02.02
Instagram 클론해보기 (HTML, CSS)  (0) 2021.01.27

+ Recent posts

티스토리툴바