2021.11.11 - [프로그래밍/Python & Django] - [파이썬 인강] 1주차 파이썬 기본 문법 환경설정 및 Python 기본(Mac)
2021.11.11 - [프로그래밍/Python & Django] - [파이썬 인강] 2주차 - 반복문,튜플, 함수, 클래스, 상속
2021.11.11 - [프로그래밍/Python & Django] - [파이썬인강]3주차-모듈과 패키지, 파일 읽/쓰기 ,예외처리 및 심화문법1
2021.12.07 - [프로그래밍/Python & Django] - [파이썬인강]4주차 클레스와 객체 ,상속, 데이터베이스, 정규표현식, 스레드
2021.11.11 - [분류 전체보기] - IT 기업 2.4개월차 드디어 노트북 구매
안녕하세요.
50프로이상 수업을 진행했습니다. 곧 몇주 뒤면 끝이 보이는 군요. 이번 주엔 HTML,CSS 다소 웹페이지 관련 내용들이 나옵니다. 해당 부분에서 당황을 많이 했지만 인강의 장점을 살려 반복하여 시청했고 이해할 수 있게 됐습니다.
HTML의 문법은 다소 어렵다고 할 수 있는데 XML과 비슷해서 적응하는데 시간이 많이 들지 않았습니다.
CSS는 선택자 부분이 가장 어려웠는데요 선택자의 종류도 많고 해서 실제 프로그래밍을 하면서 익혀야 할 것 같습니다.
정리한 내용 공유 드리겠습니다.
웹페이지
html : 페이지의 제목, 문단, 표, 이미지 등의 웹 구조를 담당
css: 실제 화면에 표시되는 방법 (색상,크기, 폰트, 레이아웃)을 지정해 콘텐츠를 꾸며주는 시작적인 것을 담당(정적)
js: 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당
html+css+js를 통해 웹페이지를 구성
사용자는 여러가지 기기로 웹페이지를 접속하게 된다면 클라이언트가 서버로 요청하고 서버는 유효하다면 응답을 해준다.
실습상황은 컴퓨터에 저희가 만든 html,css등을 만들고, 웹프라우저로 우리가 요청해보는 것이다.
이번 주차의 목표 !
해당 실습은 서버와 db를 사용하기전에 html과 css js 를 사용하여 우선 구축하고자 한다.
HTML 기본문법
기본 구조는
<h1>html</h1>
h1: 태그
html: 내용
---
<태그 속성="값"> </태그>
태그, 내용, 속성, 속성의 값으로 이루어져있다.
<html>
<head>
<title>base-on</title>
</head>
<body>
Welcome to my blog!
</body>
</html>태그의 안에 다른 태그를 넣을수 있고 부모의 자식의 관계를 나타낸다.
html에서 태그는 자신의 이름에 따라 각자 특별한 역할은 한다 .
ex) <body> </body>는 문서의 몸통으로 안에 들어가는 내용이 몸통부에 표시되게 된다.
주석
<!-- 주석-->
웹프라우징이란
- 사용자가 URL 주소를 입력
- 어떤 IP인지 알아내 접속
- 브라우저가 해당 서버에 입력한 주소를 요청
- 서버에서 브라우저의 요청을 해석하고 결과에 따라 데이터 전송
- 브라우저가 서버에 받은 값을 해석하여 화면으로 출력
- 웹브라우징
태그: 태그에 따라 역할이 달라지며 html에는 미리 정해놓은 태그들이 있다.
의미 있는 태그들
<br>
<img>
<meta>
<link>
<input>
<hr>
눈여겨볼 태그
- div :css와 같이 가상의 레이아웃을 설계하는 역할
<br>
<img>
<meta>
<link>
<input>
<hr><div>content1</div>
<div>content2</div>
-------
<html>
<body>
<div style="background-color:cyan">구역1</div>
<div style="width:100px; height:100px; background-color:#CF0">구역2</div>
</body>
</html>
2.<br>
<html>
<body>
the
first
line<br>
the second line
</body>
</html><br>전후로 라인이 변경된다.
- <p> 문장을 출력
- <b> 글자를 두겁게
- <i> 글자를 기울어서
- <h#> #대신 숫자가 커질수록 글자 크기가 커짐
- <a> 하이퍼링크를 걸어주는 태그
- 속성
href : 클릭시 이동할 링크
target: 링크를 여는 방법
_self: 현재페이지
_blank: 새탭
_parant: 부모페이지로
_top:최상위 페이지로
-프레임이름
<html>
<body>
<a href="http://www.naver.com">Go Naver</a><br>
<a href="http://google.co.kr" target="_blank">Go Google (new window)</a>
</body>
</html>
8.<img>: 이미지를 삽인하는 태그 ,src속성을 통해 경로를 지정
-속성:
src: 이미지경로
width: 가로 크기
height:세로 크기
9.<table> : 표를 삽입할 때 사용
<tr> 행을 표시
<td> 열을 나타냄
<table>
<tr>
<td>섹션1</td>
<td>섹션2</td>
</tr>
<tr>
<td>섹션3</td>
<td>섹션4</td>
</tr>
<tr>
<td>섹션4</td>
<td>섹션5</td>
</tr>
</table>
9-1 thead : 표에 제목 줄을 가지고 있다
<table>
<thead>
<tr>
<th>학교</th>
<th>창립년도</th>
</tr>
</thead>
<tbody>
<tr>
<td>서울대학교</td>
<td>1946</td>
</tr>
<tr>
<td>고려대학교</td>
<td>1905</td>
</tr>
<tr>
<td>연세대학교</td>
<td>1885</td>
</tr>
</tbody>
</table>
9-3 표 병합
<table>
<tr>
<td colspan="2">2x1 셀</td>
</tr>
<tr>
<td>1x1 셀</td>
<td>1x2 셀</td>
</tr>
</table>
------------------------------------------
<table>
<tr>
<td rowspan="2">1x2 셀</td>
<td>1x1 셀</td>
</tr>
<tr>
<td>1x1 셀</td>
</tr>
</table>
10.<span>: div와 비슷하나 줄바꿈이 안된다는 차이가 있다.
<html>
<body>
<span style="background-color:red">span1</span>
<span style="background-color:blue">span2</span>
<span style="background-color:green">span3</span>
</body>
</html>
11. <li> : list 목록을 만드는 태그 <ol>은 숫자가 있는, <ul>은 모양으로 목록을만듬
<html>
<body>
<ol>
<li>목록1</li>
<li>목록2</li>
</ol>
<ul>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
<ol>
<li>목록3-1</li>
<li>목록3-2</li>
</ol>
</ul>
</body>
</html>
12. <form> 입력 양식을 만든다.
-속성
name: 폼이름
action: 데이터가 전송되는 url
method: 폼 전송방식 (get/post)
input: 입력받는 직접적인 태그
속성
text: 일반 문자
password: 비밀번호
button: 버튼
submit: 양식 제출용 버튼
reset: 양식 초기화용 버튼
radio: 한개만 선택할 수 있는 컴포넌트
checkbox: 다수를 선택할 수 있는 컴포넌트
file: 파일 업로드
hidden: 사용자에게 보이지 않는 숨은 요소
<form>
<p>
<strong>아이디</strong>
<input type="text" name="name" value="아이디 입력">
</p>
<p>
<strong>비밀번호</strong>
<input type="password" name="password" value="비밀번호 입력">
</p>
<p>
<strong>성별</strong>
<input type="radio" name="gender" value="M">남자
<input type="radio" name="gender" value="F">여자
</p>
<p>
<strong>응시분야</strong>
<input type="checkbox" name="part" value="eng">영어
<input type="checkbox" name="part" value="math">수학
</p>
<p>
<input type="submit" value="제출">
</p>
</form>
CSS
형태/ 구조
```bash
선택자 {속성 : 값;}
예제
div { color :red ; margin: 20 px ; }
```선택자
* :모든 선택자
*{color:red;}
태그이름 : 태그선택자
li {color:red;}
.클래스 :클래스 선택자
.클래스 {color:red;}
#아이디 : 아이디 선택자
#id {color:red;}
복합선택자
일치선택자 : 동시에 만족하는 선택자
span.orange {color:red;} -> span태그에 클래스가 동일한 것
자식선택자: 요소의 자식을 선택
ul>.orange {color:red ;} -> ul의 자식중에 클래스가 orange인것
하위(후손)요소 : 후손(자식도 포함)인 것에 대한 선택자
dev .orange{color:red;}
인접형태 선택자: 다음형제 요소를 하나 선택
.orange+li{color:red;}
일반 형제 선택자: 다음 모든형제 요소를 하나 선택
.orange~li{color:red;}
---
가상클래스 선택자
hover : 마우스 커서가 올라가있는 동안 선택
a:horver{ color:red ;}
active: 마우스가 클릭하고 있는 동안
a:active {color:red;}
focus: 요소가 집중되면
input:focus{color:red;}
first-child: 선택자 형제 요소 중 첫째라면 선택
.fuits span:fist-child{color:red;}
last-child: 선택자 형제 요소 중 마지막이 라면 선택
.fuits span:last-child{color:red;}
Nth-child : N번째 요소
.fruit *:nth-child(2){color:red; }
가상요소 선택자: 요소의 내부에 내용(content)을 삽입
.box::before{ content:"base"}
.boo::after{content:"-on"}
속성 선택자
속성을 포함하는 요소 선택
[type="password"] {color="red"}CSS속성
박스모델
- 화면에 보여지는 상자들 (요소들은 사격형으로 이루어짐)
width : 가로
height: 세로
margin: 여백
padding: 여백
글꼴문자
-서체들의 대한 css속성 (색, 크기)
배경
-배경에 색, 이미지
배치
-원하는 요소를 원하는 곳에 놓는것 (좌표가 필요)
플렉스
-수직, 수평에 대한 정령
전환
-전 -> 후 상태로 애니매이션(색이나 그림이 바뀜)
변환
-회전 물체 이동, 크기를 줄임 (원근 , 3D효과 까지 됨)
띄움
- 요소 주변에 글자가 보이도록
애니메이션
- 이미지가 순서대로 변경됨 (전환효과를 여러개를 사용할 때)
그리드
- 수직 수평 모두를 제어 (2차원 레이아웃 구조를 작업)
다단
-문서 작성할때 문장 단위로 단을 나눌때
필터
-요소에 들어 갈수있는 필터 효과를 줌2021.12.13 - [프로그래밍/Python & Django] - [Python & Django] HTML /CSS 실습환경
[Python & Django] HTML /CSS 실습환경
실습환경 - vscod vs코드에서 확장팩을 추가 1. korean language Pack for vscode 2. Live Server 적용하기 간단한게 HTML파일 생성하고 오른쪽 마우스 - Open with Live Server
base-on.tistory.com
* 팁
div에 클래스를 같단하게 넣기
.[클래스이름] + [tab_key]
CSS 실습해보기
박스모델
html
.container {
background-color: brown;
}
#자식 item을 추가
.container .item {
width: 200px; #너비
height: 100px;#높이
background-color: tomato; #배경색
margin-bottom: 20px; #아래에 마진
padding: 20px; #안의 마진
border: 4px solid blue; #선 크기 선종류(datted: 점선) 선 색
box-sizing: border-box; #크기를 처음의 width,heigth로 맞춘다.
}
.container .item:nth-child(2) {
box-shadow: 10px 20px 30px black; #박스 그림자: x축 y축 그림자연함 그림자색
}
.container .item:nth-child(3) {
opacity: 0.5;
}
글자
html
.container .item {
color: yellowgreen;
border: 2px solid black;
line-height: 2;
font-size: 30px;
font-style: italic;
text-align: center;
}
.container .item:nth-child(2){
font-weight: bold;
text-decoration: underline;
}
/*
font- : 글꼴 크기 기울기 두께
test- : 정렬, 줄, 넘침
*/
배경
html
width: 200px;
height: 100px;
background-color: royalblue;
margin: 10px;
background-image: url("IMAGE_URL");
background-size: 80px;
background-repeat: no-repeat;
background-position: 20px 50px;
}
배치
html
배치
.container {
width:400px;
height: 250px;
margin: 50px;
padding: 20px;
background-color: orange;
box-sizing: border-box;
position: relative; #해당값을 넣어야 자식에서 위치값을 정할 수 있다.
}
.container .item {
width: 100px;
height: 100px;
background-color: blue;
}
.container .item:nth-child(1){
position: absolute;
left: 40px;
bottom: 100px;
}
.container .item:nth-child(2) {
position: absolute;
top: 20px;
right: 100px;
}
플래스: 정렬관련
html
.container {
background-color: orange;
display: flex; #수평정렬
justify-content: center; #왼쪽/아래 넣기 , 기본값 flex-start
}
.container .item {
width: 100px;
height: 100px;
background-color: red;
border : 2px solid black;
box-sizing: border-box;
display: flex;
justify-content: center; #가로
align-items: center; 세로
}
전환/ 변화
html
.container .item {
margin: 30px;
padding: 10px;
width: 100px;
height: 100px;
background-color: red;
border-radius: 10px;
transition: 250ms;
}
.container .item:nth-child(1):hover {
width: 200px;
background-color: salmon;
transform: rotate(45deg) ; #45회전
}
.container .item:nth-child(2):hover {
transform: rotate(45deg) scale(1.2) ; #45도 기울이고 크기 변경
}
.container .item:nth-child(3):hover { #3차원으로 45도 기울이기
transform: perspective(200px) rotateX(45deg) ;
}
'프로그래밍 > Python & Django' 카테고리의 다른 글
| [파이썬인강]6주차 django 프레임 워크, django view,settings,url,templates 파일 (0) | 2021.12.20 |
|---|---|
| [Python & Django] HTML /CSS 실습환경 (0) | 2021.12.13 |
| [파이썬인강]4주차 클레스와 객체 ,상속, 데이터베이스, 정규표현식, 스레드 (0) | 2021.12.07 |
| [파이썬인강]3주차-모듈과 패키지, 파일 읽/쓰기 ,예외처리 및 심화문법 (0) | 2021.11.29 |
| [파이썬 인강] 2주차 - 반복문,튜플, 함수, 클래스, 상속 (0) | 2021.11.11 |
