[Way to PM] 프론트 엔드 - HTML, CSS를 이용한 단순 게시판 모습 구현

2024. 1. 19. 14:20ㆍ[Way to PM] 프론트 엔드

0. 단순 게시판 모습 구현 레퍼런스

1. 우선 순위 설정

1) HTML로 의미 구현

2) CSS로 스타일 구현

2.WHY? 이 과제를 하는 목적

1) HTML로 브라우저에 랜더링될 의미를 구현해보면서 이해도 향상

-목적의 구체화:

h1~6 태그 사용의 구분과 각 블록요소 사이의 정렬 및 줄바꿈 문제를 해결하는 것

섹션 구획 잘 해보기

2) CSS로 랜더링될 의미를 더욱 사용자 친화적으로 스타일해보면서 이해도 향상

-목적의 구체화:

글 조회 밑에 있는 회색박스 상단의 검은색 선 구현

각 요소들의 위치 설정 문제 해결

3. HOW? 목적 달성을 위해 작성한 코드

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            margin-left: 20px;
            margin-top: 20px;
        }

        li {
            margin-left: 20px;
        }

        .estlogo {
            width: 472px;
            margin-top: 20px;
        } /*이미지 크기 값을 모를 땐 개발자 도구에서 내가 맞추고자 하는 요소에 display:inline-block 추가 후 박스모델 참고
        그냥 inline 요소주면 auto로 나와서 확인안됨 */

        .grayBox {
            background-color: lightgray;
            border-top: 3px solid black;
            margin-top: 20px;
        }

        .textBunch1 {
            margin-top: 30px
        }

        .textBunch2 {
            margin-top: 30px
        }

        .textBunch3 {
            margin-top: 30px
        }

        a {
            margin-top: 40px;
        }
        
        .grayBox ol {
        	display: flex;
            align-items: center;
        }

    </style>
</head>
<body>
<!--  섹션이랑 푸터로 나눠보기-->
<header>
        <h1>글 조회</h1>
    <div class="grayBox">
        <h2>이스트 소프트 백엔드 개발 오르미 1기 모집</h2>
        <ol>
            <li>작성자: 홍길동</li>
            <li>작성일: 2023.04.24</li>
            <li>조회수:1020</li>
        </ol>
    </div>
</header>
<!--   유사한 콘텐츠 값이기 때문에 ol li태그로 작성-->
<img src="est.jpg" alt="" class="estlogo">
<p>
    <strong>이스트 소프트 백엔드 개발 오르미 1기</strong>  모집
</p>

<main>
<section>
    <div class="textBunch1">
    <h3>오르미란?</h3>
    <p>이스트소프트 백엔드 개발자 부트캠프 참여자를 일컫는 말입니다.</p>
    <p>산, 봉우리란 뜻의 오름에서 착안하여 <strong>교육을 통해 개발 실력을 올리자는 의미</strong>를 담고 있습니다.</p>
    <p>이스트소프트와 함께 백엔드 개발이란 오름⛰을 넘어 정상에 함께 올라 보시죠!</p>
<!--별도의 p태그를 사용하면 br태그 안쓸 수 있다-->
    </div>
</section>

<section>
    <div class="textBunch2">
    <h3>이런 분이 함께해요!</h3>
    <ul>
        <li>비전공자이지만 백엔드 개발자가 되고 싶은 사람</li>
        <li>이스트소프트 실무 노하우에 대해 알고 싶은 사람</li>
        <li>전공자이지만 실무와 관련된 프로젝트를 경험하고 싶은 사람</li>
        <li>이스트소프트와 함께 백엔드 개발 커리어를 쌓고 싶은 사람</li>
    </ul>
    </div>
</section>

<section>
    <div class="textBunch3">
        <h3>선정 과정</h3>
        <ol>
            <li>서류 접수</li>
            <li>서류 심사</li>
            <li>사전 테스트 진행</li>
            <li>합격자 발표</li>
            <li>내일배움카드 발급</li>
            <li>교육 시작</li>
        </ol>
    </div>
    <a href="login.html" target="_blank">이스트소프트 바로가기</a>
</section>
</main>

</body>
</html>

4. WHAT? 결과물

구현 모습

Document

글 조회

이스트 소프트 백엔드 개발 오르미 1기 모집

작성자: 홍길동
작성일: 2023.04.24
조회수:1020

이스트 소프트 백엔드 개발 오르미 1기 모집

오르미란?

이스트소프트 백엔드 개발자 부트캠프 참여자를 일컫는 말입니다.

산, 봉우리란 뜻의 오름에서 착안하여 교육을 통해 개발 실력을 올리자는 의미를 담고 있습니다.

이스트소프트와 함께 백엔드 개발이란 오름⛰을 넘어 정상에 함께 올라 보시죠!

이런 분이 함께해요!

비전공자이지만 백엔드 개발자가 되고 싶은 사람
이스트소프트 실무 노하우에 대해 알고 싶은 사람
전공자이지만 실무와 관련된 프로젝트를 경험하고 싶은 사람
이스트소프트와 함께 백엔드 개발 커리어를 쌓고 싶은 사람

선정 과정

서류 접수
서류 심사
사전 테스트 진행
합격자 발표
내일배움카드 발급
교육 시작

이스트소프트 바로가기

5. 배운 점 및 자기 평가

1) HTML 블록요소 간에 정렬 및 선 나누기를 어떻게 할 것인가?

-<br>을 이용하지 않고 html태그의 block/inline요소의 특성을 이용한다. 추가로 css를 통해 조정한다.

2) 글 조회 밑에 있는 회색박스 상단의 검은색 선을 어떻게 구현할 것인가?

-border-top을 통해 부분적으로 적용 가능. 또한 solid를 통해 border 속성 구현해야 보인다.

자기평가:

1. 간단한 구성과 화면 구현 정도는 빠르게 가능해졌다.

2. 강사님들이 제공해주신 예제도 좋지만 무조건 뭐라도 구현해보자. 그 과정에서 마주치는 시행착오가 단순 예제 반복보다 낫다.

'[Way to PM] 프론트 엔드' 카테고리의 다른 글

[Way to PM] 프론트 엔드 - HTML, CSS JS로 랜딩 페이지 구현(Main) (1)	2024.01.28
[Way to PM] 프론트 엔드 - HTML, CSS JS로 랜딩 페이지 구현(Header) (0)	2024.01.24
[Way to PM] 프론트엔드 - 회원가입 구현 (0)	2024.01.20
[Way to PM] 프론트엔드 - 반응형 Input 요소 만들기 (0)	2024.01.19
[Way to PM] 프론트엔드 - 로그인 화면 구현 (0)	2024.01.19

PM 송재훈