TIL

20230508

박진웅 2023. 5. 8. 21:45

1. 오늘 한 것

웹 개발 공부

2. 공부 내용 정리

    <div class="wrap">
        <div class="mytitle">
        <h1> 로그인 페이지입니다</h1>
        <h5> 아이디 비밀번호를 입력하세요</h5>
        </div>
        <p>ID : <input type="text" /></p>
        <p>PW : <input type="text" /></p>
        <button class="mybtn">로그인</button>
    </div>

 

<h1> : 6단계의 구획 제목을 나타낸다. 구획 단계는 <h1>이 가장 높고 <h6>은 가장 낮다.

h1일 때가 글씨 크기가 제일 크고 h6일 때가 글씨 크기가 제일 작다 하지만 글자 크기를 조종하기 위해서 이걸 써서는 안된다 <head> 안에 <style>를 만들고 조절하려는 글씨 크기가 있는 곳에 class를 생성한 뒤에 font-size를 쓸 것

Ex) <head><style></style>.a{font-size:30px;}</head><body><p class="a">가나다라마</p></body>

 

html에서 <p> 요소는 하나의 문단을 나타낸다.

대충 컴퓨터 언어에서 print랑 비슷한 느낌<p>가나다라마</p>결과 : 가나다라

 

<div> 플로우 콘텐츠를 위한 통용 컨테이너이다. CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않는다

 

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

가운데 정렬 해주는 코드 4개가 한 세트이다

 

background-image: url('이미지 주소');

background-position : center;

background-size: cover;

이미지 삽입할 때 쓰는 코드란다

 

주석 단축키

단축키: 주석처리하고 싶은 라인들을 선택 → ctrl(또는 command) + / (슬래시)

 

margin padding 속성은 각각 바깥쪽 여백 안쪽 여백을 의미한다

width, height 속성과 마찬가지로 숫자 뒤에 단위를 표시하여 적다

방향마다 여백을 다르게 설정할 수 있다

margin: 20px 같은 표현은 상하좌우 모두 20px을 의미한다

margin: 30px 10px은 상하 30px, 좌우 10px을 의미한다.

margin: 30px 10px 20px 50px은 위 30px, 오른쪽 10px, 아래 20px, 왼쪽 50px을 의미한다.

margin: 30px 10px 40px은 위 30px, 좌우 10px, 아래 40px을 의미한다.

 

 

3. 내일 할 것

자바 스크립트

4. 느낀점

솔직히 잘 모르겠다 이럴게 아니라 책 사서 공부해야할 거 같기도 하고

5. 메모