0629 개발일지

Yesol Lee·2021년 6월 29일

html 대구AI스쿨

AI스쿨_개발일지

목록 보기

2/57

학습내용

html 태그의 속성(inline, block), html 구조 짜기 (기존 사이트 여러 개 참고)
Github 소스코드 전문: YesolLee421-github

html 태그의 속성: inline, block

inline: 한 줄 출력, 공간 점유 불가, 상하배치 불가 (ex. <span>)
block: 줄바꿈 출력, 공간 점유 가능, 상하배치 가능 (ex. <h>)

        <style>
            tr, td, th {
                border: solid 1px #000000;
            }

            span {
                width: 300px;
                height: 300px;
                background-color: yellow;
                /* margin-top: 100px; */
                /* padding-bottom: 100px; */
            }

            h1 {
                width: 300px;
                height: 300px;
                background-color: yellow;
                /* margin-top: 100px; */
                /* padding-bottom: 100px; */
            }
        </style>

    <span>Inline</span>
    <span>Inline</span>

    <h1>Block</h1>
    <h1>Block</h1>

inline&block

html 설계도면 짜기

하나의 hmtl페이지의 레이아웃을 만드는 것을 설계도면을 만드는 것에 비유하였다. html 페이지는 수많은 태그로 이루어져 있고, 여러 속성을 가진 요소를 만들기 위해 많은 태그를 겹겹이 사용해야 한다. 앞으로 html로 전체적인 구조를 짜고, css로 디테일한 디자인을 수정하고, javascript를 통해 콘텐츠 및 다양한 효과를 추가하게 될 것으로 예상된다.

설계도면 짤 때 주의점

컨텐츠의 이동 횟수 줄이기
비슷한 성격의 컨텐츠를 하나의 영역으로 감싸기
- 예를 들어 이미지는 이미지끼리, 글자는 글자끼리 등
- 추후 하나의 객체에 속하는 많은 요소를 한 번에 수정할 수 있음

html 페이지 실습내용

img placeholder 자리 채울 수 있는 사이트

"https://via.placeholder.com/{weight}x{height}"

태그 선택하기

<span>: 하나의 단어 등 짧은 내용 적을 때
<ul>``<li>``<a>: 클릭하면 다른 페이지로 이동하는 메뉴
<h>: 리스트의 한 요소의 제목
<div>: 레이아웃에서 여러 요소를 묶어주는 태그

카카오 친구목록 설계도

<ul>
    <li>
        <a href="#">
            <!--https://placeholder.com/ 이미지 placeholder-->
            <img src="https://via.placeholder.com/150x130" alt="">
            <div>
                <h3>박지연</h3>
                <p>다정한 사람</p>                        
            </div>
        </a>
    </li>
</ul>

카카오친구목록

네이버 메인 설계도: 경제M, 레시피

리스트의 각 요소는 클릭 시 다른 페이지로 이동시켜야되기 때문에 <li>태그 안에 <a>태그를 넣고 그 안에 리스트 요소로 다시 적어주었다.

<ul>
    <li>
        <a href="#">
            <img src="https://via.placeholder.com/150" alt="">
            <div>
                <span>[푸드클래스]</span> <span>송현경 요리 연구가</span>
                <h3>쌀로 만든 달콤한 디저트, 라이스푸딩</h3>
                <p>시나몬 파우더와 메이플 시럽으로
                    달콤함을 채운 이색 디저트 만드는 법</p>
                <div>
                    <span>#프랑스가정식</span> <span>#디저트</span>
                </div>
            </div>
        </a>
    </li>
</ul>

네이버메인-레시피

다음 메인 설계도: 자동차, 부동산 섹션

레이아웃 위치에 따라 div로 왼쪽, 오른쪽, 위, 아래 등 영역을 나누어주었다. 여기부터는 content를 넣지 않아서 코드만 첨부한다.

<div>
    <!--왼쪽-->
    <div>
        <img src="" alt="">
    </div>
    <!--오른쪽-->
    <div>
        <!--오른쪽위-->
        <div>
            <ul>
                <li>
                    <a href="#">
                        <h3></h3>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <h3></h3>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <h3></h3>
                    </a>
                </li>
            </ul>
        </div>
        <!--오른쪽 아래-->
        <div>
            <ul>
                <li>
                    <a href="#">
                        <h3></h3>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <h3></h3>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <h3></h3>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

다른 분이 올린 질의응답 중 <nav>태그가 시멘틱 태그(해당 태그의 용도를 나타냄)임을 고려해 상단 네비게이션 설계에 <nav>태그 추가해주었다. 또한 레이아웃 모양이 버튼형식이어도 해당 요소를 클릭하면 다른 페이지로 가야하는 경우 <a>태그를 사용한다는 것을 알게 되었다.

<header>
    <div>
        <h1><a href="#"><img src="" alt=""></a></h1>
        <nav>
            <ul>
                <li><a href="#">SERVICES</a></li>
                <li><a href="#">PORTFOLIO</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">TEAM</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </nav>
    </div>
    <div>
        <h2>Welcome To Our Studio!</h2>
        <h3>IT'S NICE TO MEET YOU</h3>  
        <a href="#">TELL ME MORE</a>
    </div>
</header>

<footer>
    <div>
        <ul>
            <li><a href="#">메뉴1</a></li>
            <li><a href="#">메뉴2</a></li>
        </ul>
    </div>
    <div><a href="#"><img src="" alt=""></a></div>
    <div>
        <p>Accepted payment methods</p>
        <ul>
            <li><img src="" alt=""></li>
            <li><img src="" alt=""></li>
            <li><img src="" alt=""></li>
            <li><img src="" alt=""></li>
            <li><img src="" alt=""></li>                    
        </ul>
    </div>
</footer>

kids gao 페이지 영역 일부

스크롤을 내리면 이미지 등 페이지 요소가 따라서 움직이는 애니메이션이 인상 깊은 사이트였다.

<body>
    <!--kids gao 상단 영역-->
    <header>
        <div>
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
        </div>

        <div>
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
        </div>
    </header>


    <!--중간 영역-->
    <div>
        <!--콘텐츠 영역-->
        <div>
            <!--왼쪽-->
            <div>
                <img src="" alt="">
                <div>
                    <img src="https://via.placeholder.com/150x130" alt="">
                    <p>진정 및 항염 효과가 있답니다</p>
                </div>
            </div>
            <!--중앙-->
            <div>
                <img src="" alt="">
                <img src="" alt="">
                <img src="" alt="">
                <img src="" alt="">
            </div>
            <!--오른쪽-->
            <div>
                <div>
                    <img src="https://via.placeholder.com/150x130" alt="">
                    <div>
                        <img src="" alt="">
                        <p>올리브유를 넣어서
                            보습 효과도 뛰어나답니다.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

어려웠던 내용

네이버 메인페이지의 html요소를 보는데 <em>이라는 처음보는 태그 발견

해결방법

https://www.w3schools.com/tags/default.asp HTML 태그 reference 페이지에서 검색해서 찾음
<em>: Defines emphasized text. 강조하고 싶은 텍스트 표시.

소감

여러 유명한 웹사이트의 html 코드를 직접 확인하면서 설계도면 작성 연습을 하니 css까지 적용하면 얼마나 다양한 레이아웃을 만들 수 있을지 기대가 되었다. 실무에서도 사용한다는 img placeholder사이트를 알게 된 것도 좋았다.

Yesol Lee

문서화를 좋아하는 개발자

이전 포스트

0628 개발일지

다음 포스트