본문 바로가기
카테고리 없음

사전캠프 7일차 -웹개발 1주차

by codechu 2025. 3. 25.

 

1. 웹개발 강의 

Html - 뼈대 css- 꾸미기 java스크립트 - 동적인 움직임을 넣어주기

 

로그인 페이지 만들어보기

사용하는 태그

1. <hr>. 큰 제목을 입력할 때 쓰는 태그

2. id, password입력 창 버튼 -> input type=“text”인지 넘버인지 칸에 속성을 부여

3. 로그인 버튼 -> button

4. 구역 설정하는 태그 <p> 아이디 패스워드 구역을 나눠줌

 

++ 내가 찾아본 띄어쓰기 태그는 <br> 이였음

 

 

Css 꾸미기는 꾸미는 대상의 지칭이 필요함

ex )짱구의 바지를 초록색으로 바꿔줘 라는 ‘바지’라는 대상의 지칭이 필요함 = 명찰이 필요하다는 뜻\

명찰을 부여하는 법 태그안에 class = “”

Class 속성 부여하기

 

이렇게 지정하고 스타일주는 방법은 바디가 아니라 헤드에 부여함(주의)

 

1. 가장 간단한 색깔 바꾸기

 

style{color:red; 마지막 세미콜론 빼먹지 말기

 

 

}

 

홈페이지 만들기

 

구역안에 글씨 넣기 ( 감싸는 건 구역 , 구역은 디브)

구역만드는 <div> 태그 쓰기

 

< div class=“mytitle”>

<h1> 큰 타이틀<h1>

<h5> 작은 제목<h5>

<div>

 

 

그리고 <div>태그의 속성을 넣고 싶으면 클래스 선언하고

스타일태그로 글자색, 박스 크기 등 만들기

 

style{ background-color: red;

여백주는 태그 = padding(패딩은 위로 여백을 줘서 디브에 크기를 줄임, margin (아래로 여백을 줘서 디브에 크기를 키움)

디브안에 이미지 넣을때는 태그 세개가 세트라 같이 기억하기

 

글씨 가운데로 넣는 태그 : text-align:center;

1. background-image: url(이미지 주소 넣기);

background-size: ;,

background-position: center;

 

}

 

에이치티엠엘은 줄 맞추기가 생명

알트+시프트+에프 누르면 줄 정리 됨

 

박스안에 글자, 내용물들을 가운데로 주고 싶으면 4개만 기억하기

display: flex;

Flex-direction:column;

Align-items:center;

Justify-content:center;

 

 

디브 박스들을 가운데로 넣기 (글자가 가운데 정렬이 아니라 디브 자체를 가운데로)

margin: 30px auto 0px auto;

 

 

 

++나중에 더 정리하기