on
[파이썬인강]5주차- 웹 & 프론트엔드 기본(html, css)
[파이썬인강]5주차- 웹 & 프론트엔드 기본(html, css)
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 기본문법
기본 구조는 html h1: 태그 html: 내용 --- <태그 속성="값">
태그, 내용, 속성, 속성의 값으로 이루어져있다.
base-on Welcome to my blog!
태그의 안에 다른 태그를 넣을수 있고 부모의 자식의 관계를 나타낸다.
html에서 태그는 자신의 이름에 따라 각자 특별한 역할은 한다 .
ex) 는 문서의 몸통으로 안에 들어가는 내용이 몸통부에 표시되게 된다.
주석
웹프라우징이란
사용자가 URL 주소를 입력 어떤 IP인지 알아내 접속 브라우저가 해당 서버에 입력한 주소를 요청 서버에서 브라우저의 요청을 해석하고 결과에 따라 데이터 전송 브라우저가 서버에 받은 값을 해석하여 화면으로 출력 웹브라우징
태그: 태그에 따라 역할이 달라지며 html에는 미리 정해놓은 태그들이 있다.
의미 있는 태그들
눈여겨볼 태그
div :css와 같이 가상의 레이아웃을 설계하는 역할
content1 content2 ------- 구역1 구역2
2.
the first line the second line
전후로 라인이 변경된다.
문장을 출력 글자를 두겁게 글자를 기울어서 #대신 숫자가 커질수록 글자 크기가 커짐 하이퍼링크를 걸어주는 태그
속성
href : 클릭시 이동할 링크
target: 링크를 여는 방법
_self: 현재페이지
_blank: 새탭
_parant: 부모페이지로
_top:최상위 페이지로
-프레임이름
Go Naver Go Google (new window)
8.: 이미지를 삽인하는 태그 ,src속성을 통해 경로를 지정
-속성:
src: 이미지경로
width: 가로 크기
height:세로 크기
9. : 표를 삽입할 때 사용
행을 표시
열을 나타냄
섹션1 섹션2 섹션3 섹션4 섹션4 섹션5
9-1 thead : 표에 제목 줄을 가지고 있다
학교 창립년도 서울대학교 1946 고려대학교 1905 연세대학교 1885
9-3 표 병합
2x1 셀 1x1 셀 1x2 셀 ------------------------------------------ 1x2 셀 1x1 셀 1x1 셀
10.: div와 비슷하나 줄바꿈이 안된다는 차이가 있다.
span1 span2 span3
11. : list 목록을 만드는 태그 은 숫자가 있는, 은 모양으로 목록을만듬
목록1 목록2 목록1 목록2 목록3 목록3-1 목록3-2
12. 입력 양식을 만든다.
-속성
name: 폼이름
action: 데이터가 전송되는 url
method: 폼 전송방식 (get/post)
input: 입력받는 직접적인 태그
속성
text: 일반 문자
password: 비밀번호
button: 버튼
submit: 양식 제출용 버튼
reset: 양식 초기화용 버튼
radio: 한개만 선택할 수 있는 컴포넌트
checkbox: 다수를 선택할 수 있는 컴포넌트
file: 파일 업로드
hidden: 사용자에게 보이지 않는 숨은 요소
아이디 비밀번호 성별 남자 여자 응시분야 영어 수학
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 실습환경
* 팁
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) ; }
from http://base-on.tistory.com/439 by ccl(A) rewrite - 2021-12-13 12:27:57