728x90
2023.01.11
1-1 1주차 오늘 배울 것
1-2 필수 프로그램 설치
1-3 HTML, CSS 기본 내용
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
1-4 Quiz_간단한 로그인 페이지 만들어보기
<h1>로그인 페이지</h1>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button>로그인하기</button>
1-5 CSS 기초
- HTML 부모-자식 구조
- css
<head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성한다.
클래스를 .mytitle { } 처럼 써야함
.mytitle {
color: white;
}
1-6 자주 쓰이는 CSS 연습하기
- 가운데 정렬
text-align: center;
- 이미지 넣기
background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size: cover;
background-position: center;background-image: url(""); 로 이미지 넣기
background-size: cover; 로 사이즈 조정
background-position: 로 가운데 조정
세 가지를 같이 쓴다.
- 귀퉁이 둥글게
border-radius: 10px;
- 여백
// 바깥여백
margin: 10px;
// 안쪽여백
padding: 10px;
// 방향 : 위, 오른쪽, 아래, 왼쪽(시계방향)
padding: 10px 10px 10px 10px;
// 가운데 정렬 (컨텐츠를 div로 묶어서)
margin: auto;
- 완성
<style>
* {
font-family: 'Hi Melody', cursive;
}
.mytitle {
width: 300px;
height: 200px;
color: white;
text-align: center;
background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size: cover;
background-position: center;
border-radius: 10px;
padding-top: 40px;
}
.wrap {
background-color: green;
width: 300px;
margin: auto;
}
</style><div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<p>ID : <input type="input"/></p>
<p>PW : <input type="input"/></p>
<button>로그인하기</button>
</div>
1-7 폰트, 주석, 파일분리
- 구글웹폰트 적용하기
https://fonts.google.com/?subset=korean
// 타이틀 밑에 링크
<title>로그인 페이지</title>
<link href="https://fonts.googleapis.com/css2?family=Hi+Melody&display=swap" rel="stylesheet">
<style>
// 폰트 전체 적용
* {
font-family: 'Hi Melody', cursive;
}
</style>
- 주석
ctrl + / 한 줄 주석
ctrl + shift + / 박스 주석
- 파일 분리
// css파일 저장 후
<link rel="stylesheet" type="text/css" href="style.css">
1-8 부트스트랩, 예쁜 CSS 모음집
https://getbootstrap.com/docs/5.0/components/buttons/
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
getbootstrap.com
1-9 CSS 꿀팁 한번 더 배우기
- 가운데 정렬
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;네 가지를 같이 쓴다.
flex-direction: row; 일 경우 컬럼이 붙어서 나옴 (예시. 제출, 취소 버튼)
- 버튼 설정 .class > button
.mytitle > button {
width: 200px;
height: 50px;
background-color: transparent; // 배경색 없음
color: white;
border-radius: 50px;
border: 1px solid white;
margin-top: 10px;
}
- 마우스 올렸을 때
.mytitle > button:hover {
border: 2px solid white;
}
- 이미지 어둡게 하기 (흰색 글씨 쓸 때 배경 사진)
linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))
//예시
background-image:linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
728x90
'개발일기 > 웹 종합' 카테고리의 다른 글
| 크롤링 연습 (기상청 홈페이지) (0) | 2023.01.18 |
|---|---|
| 파이썬 기초, 웹스크래핑(크롤링) 기초 (0) | 2023.01.18 |
| Ajax (0) | 2023.01.14 |
| JQuery (0) | 2023.01.14 |
| 부트스트랩, Javascript 사용 (0) | 2023.01.14 |
