[TIL] 01주차-01

작성 이유는?

해당 게시물을 작성하는 이류는 제가 Front-End에 대해 배우면서 나중에 제가 배워왔던 걸 돌아보기 위해서 작성을 하고 있습니다.

첫 주차, 첫 수업 내용은?

첫 수업이니 만큼 Front-End에 기초에 대한 수업을 진행했습니다. [head], [body]에 역할이나, 각종 메서드에 쓰임새, 요즘 유행하고 있는 디자인 형식 등 다양한 기초 지식에 대한 것을 배웠습니다.

각종 요소

다양한 요소에 대해서 배웠는데 대표적으로 h1, h2, h3 , p에 대해서 배웠습니다. h1, h2, h3, p와 같은 경우는 가장 큰 차이는 글자에 크기에 있었습니다.

    <h1>안녕하세요</h1>
    <h2>안녕하세요</h2>
    <h3>안녕하세요</h3>
    <p>안녕하세요</p>

요소마다 다른 글씨 크기가 나오는 걸 볼 수 있었습니다.

그냥 p를 사용하여 글을 쓸 수는 있지만 굳이 h를 사용하는 이유는 검색엔진을 최적화를 하기 위해서입니다.

DIV에 쓰임새

div는 쉽게 말해 요소를 담는 그릇 같은 존재입니다. 이를 새새하게 나누면 나중에 복잡한 코딩을 할 때도 좀 더 제가 원하는 배치로 요소들을 옮길 수 있습니다.

    <div class="Left-header">
        <h1>안녕하세요</h1>
    </div>
    <div class="Middle-header">
        <h1>안녕하세요</h1>
    </div>
    <div class="Right-header">
        <h1>안녕하세요</h1>
    </div>

CSS를 작성하면 자식요소들을 본인이 원하는 위치에 배치 할 수 있습니다.

CSS적용

요소에 CSS를 적용하는 방법으로 Inline 방식과 따로 선언하는 방식을 배웠습니다. Inline 방식은 말 그대로 해당 코드에 style을 적용시키는 방식입니다.
따로 선언하는 방식은 CSS파일을 따로 만들어서 Link해서 사용하거나 head쪽에 따로 선언을 해서 스타일을 적용하는 방식이 있습니다.

    <p style="color: blue;">
        안녕하세요
    </p>

    <p class="text">
        안녕하세요
    </p>
    
    .text{
    color: red;
	}

CSS를 어떻게 쓰는지에 따라 웹 사이트에 분위기가 달라 보이게 할 수 있습니다.

요소 배치

기본적으로 div는 박스 구조여서 한 줄을 쓰면 자동으로 줄 바꿈이 되서 아랫줄에 출력이 됩니다.

    <div class="box">
        <div class="red" style="background-color: red;"></div>
        <div class="blue" style="background-color: blue;"></div>
        <div class="yellow" style="background-color: yellow;"></div>
        <div class="green" style="background-color: green;"></div>
        <div class="purple" style="background-color: purple;"></div>
    </div>
    
    .box div{
    width: 100px;
    height: 100px;
	}

가로 정렬

이런식으로 세로로 출력됩니다. 만약 본인이 가로로 출력하길 원하면 CSS에 flex를 추가하면 됩니다.

.box{
    display: flex;
}

이 때 주의점은 아까처럼 자식요소에 추가하는게 아니라 부모요소에 display: flex를 추가해야지 자식요소들이 가로정렬이 됩니다.

간격 주기

해당 요소들에 간격을 두고 싶으면 [gap]을 사용하면 됩니다.

.box{
    display: flex;
    gap: 10px;
}

상세 배치

요소를 오른쪽이나 왼쪽 가운데에도 정렬 시킬 수 있습니다. 방법은 많지만 간단하게 float을 사용해서 할 수 있습니다. 하지만 float은 요소를 크기만큼 지정한다는 단점이 있습니다.

위 사진은 float을 지정하지 않은 div고, 아래 사진은 float이 적용된 div에 영역입니다. 이를 고려해서 본인에 상황에 맞는 방법으로 CSS를 작성해야 합니다.

요소 여백

많이 사용했던 건 [padding]과 [margin]입니다. 쉽게 말하면 padding은 안쪽 여백 margin은 밖에 여백입니다.

해당 사진에 padding값을 주면

.hi{
    width:100px;
    height:20px;
    text-align: center;
    padding: 30px
}

초록색 부분이 padding값이 적용된 곳입니다.

margin은 아까 gap과 비슷합니다. 요소에 여백값을 쉽게 알려면 F12를 눌러 오쇼를 확인하면 해당 요소에 여백값을 쉽게 볼 수 있습니다.