[Way to PM] 프론트 엔드 - HTML, CSS JS로 랜딩 페이지 구현(Header)

[Way to PM] 프론트 엔드

[Way to PM] 프론트 엔드 - HTML, CSS JS로 랜딩 페이지 구현(Header)

송재훈 2024. 1. 24. 20:24

0. 레퍼런스

1. 우선 순위 설정

1) HTML로 의미 구현

2) CSS로 스타일 구현

3) JS로 기능 구현

2. WHY - 해당 과제를 통해 얻고자 하는 목표

1) HTML, CSS로 부여된 랜딩 페이지 시맨틱하게 구현을 통한 학습 및 역량강화

2) JS로 모달창, 탑버튼, 이미지 데이터 불러와서 이벤트(클릭, 스크롤)와 연동하는 기능 구현 을 통한 학습 및 역량강화

3) 모범 사례와의 비교를 통한 심화 학습

3. HOW - 코드 리뷰

1) 내가 구현한 코드

See the Pen Untitled by 송재훈 (@ovzdbclr-the-sasster) on CodePen.

2) 클린 코드 사례

See the Pen Untitled by 송재훈 (@ovzdbclr-the-sasster) on CodePen.

리뷰-HTML

1. nav의 Download 콘텐트를 button태그로 구현하려고 하다가 css적용하기 힘들어서 nav에서 따로 빼고 구현했다.
-> a태그로 css 적용해서 구현하고 css로 적용. 버튼처럼 생겼다고 버튼태그 안써도 된다

2. 줄바꿈을 위해 문장이 끝나지 않았는데 h태그와 p태그를 과사용했다.

-> 기본적으로 h, p 태그는 '완성된 문장'을 콘텐츠로 가져야 한다. 즉, 줄바꿈을 원하면 br태그나 css로 처리한다.

3. html에서 img 태그를 통해 이미지를 넣고 css로 위치 정렬시켰다.

-> 이미지 처리는 img 태그를 이용하기보단 background-img를 통해 css한다. html 코드를 줄여 유지보수를 용이하게하고, html 코드가 감소한만큼 브라우저에서 랜더링할 때 유리하다.

리뷰-CSS

1. 고려하지 못함

-> nomalize.css를 통해 가능한한 브라우저의 내장 스타일을 최대한 건들지 않는 선에서 브라우저 간에 상이한 부분만 스타일을 통일시켜 어떤 브라우저에서 구동시켜도 구현되도록 한다.

2. CSS 적용을 더 용이하게 하기 위해 *선택자를 이용해 마진을 0으로 만듦.

-> common css(주석 처리로 명시된 부분) 부분을 통해 전체적으로 적용될 css 속성을 미리 다 적용시킴

*ex)

/* common css */
html{
    scroll-behavior: smooth;
}

*{
    margin:0;
    padding:0;
    line-height:20px;
}

ul, ol{
    list-style: none;
}

a{
    display: inline-block;
    text-decoration:none;
    color: inherit;
}

button{
    border: none;
    cursor:pointer;
}

img{
    width: 100%;
    vertical-align: top;
}

.a11y{
    display: inline-block;
    position:absolute;
    overflow:hidden;
    width:1px;
    height:1px;
    border:none;
    clip-path:inset(50%);
}

.btn-common{
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background-color:#D97652;
    border-radius: 40px;
}

**물론 구현하고자 하는 내용에 따라 다를 수 있다. 레퍼런스를 잘 분석해서 공통부분을 미리 잘 적용하자. 가령 예를 들면

img{
    width: 100%;
    vertical-align: top;
}

이처럼 영어 문자열은 basline을 기준으로 작성되는데 이미지 또한 그래서 약간의 뜨는 공간이 생길 수 있다. 이를 vericla-aling: top;을 적용해 미리 해결한다.

3. 요소를 감싸는 div를 만들어 스타일을 넣기 위한 목적으로 사용한 것은 좋았으나 넓이를 width 값으로 고정해 제한적인 웹페이지가 되었다.

->요소를 감싸는 div에 flex-basis를 적용하고 요소를 감싸는 부모요소에 다른 요소가 더 들어가거나, 사용자의 웹페이지 반응성에 따라 유연하게 반응하는 웹페이지를 구현할 수 있다.

4. padding은 일절 사용 안하고 margin으로만 위치 배열 거의 해결. padding을 언제 적절히 사용해야 할 줄 몰랐다.

-> 요소와 요소는 마진, 컨테이너 안에서의 여백은 패딩으로 조절해보자

5. 배경이미지를 뒤로 넣기 위해 posion: abolute적용과 다시 위치를 조절하기 위한 top, left 적용으로 코드가 9줄이 나왔다.

-> 밑 처럼 css에서 배경이미지를 적용할 요소에 한 줄로 해결한다.

background: url("images/img_hodu_header.png") bottom right no-repeat;

6. nav와 h1의 정렬과 nav 안 요소들의 정렬을 위해 display:flex를 과사용했다.

-> 밑 처럼 float으로 정렬 가능. h1은 display: inline block으로 처리.

.cont-header nav{
    float:right;
}

7. p태그 줄바꿈을 위해 p태그를 과사용했다. 완성된 문장이 콘텐츠로 들어가지도 않았다.

-> 밑처럼 max-width를 통해 유연하게 대처한다.

.cont-header .txt-header{
    max-width: 420px;
    margin: 40px 0;
}

4. WHAT - 이미지를 포함한 구현결과

5. 배운점 및 자기평가

1) 당시엔 알고 있는 것들을 토대로 결과만보고 구현했는데 이젠 과정에서 최대한 고민해야겠다

2) 코드를 공부하는 관습?에 따라 고민하되 너무 끌지않고 바로 찾아서 우선 결과로 만들어 본다.

3) 코드리뷰나 상급자의 코드와 내 코드를 비교분석해본다.

자기평가

1. HTML의 의미 구현과 CSS 구현 시 더 시맨틱한 코드를 짤 수 있게 되었다.

2. 한 번 구축했던 코드라도 역량을 확보한 뒤 다시 공부해본다.