HTML&CSS
-
HTML에 대한 이해_210406(화)HTML&CSS 2021. 7. 21. 23:34
HTML 에 대한 이해 WHY HTTP:// www.naver.com을 쳤을 때 어떤 과정으로 어떤 결과가 나오는지 알아야 html을 이해할 수 있다. "index.html" 네이버 주소를 쳤을때 네트워크에 열어달라는 리퀘스트를 보내고 IDC center Server라는 DNS Server에서 호출이 되는데 이런 규약들을 HTTP이라고 한다. DNS Server: 168.126.68.~~(IP,한국통신) 왜 네트워크는 네이버로 안가고 IDC center Server로 가서 호출? : IDC center Server에 우리나라의 모든 사이트 주소가 있다. ex) 내가 보낼 편지의 주소(네이버 주소)를 쓰고 우체국(DNS Server)에서 주소로 보내준다 네이버 -- request --> 네트워크..
-
css태그정리:transition등_210402(금)HTML&CSS 2021. 7. 21. 23:31
#transition 서서히 변하는 애니메이션 효과. ☆속성 *transition-property: 대상 설정 -none | all | 특정대상 *transition-duration:진행 시간 *transition-timing-fuction: 속도감 linear: -ease-in: 느리게 시작 -ease-out:느리게 끝 *transition-delay:지연시간(시작전 지연시간) #animation @keyframes 속성 -from: 시작점 -to: 끝점 -50%: 중간점(%로 지정가능) @keyframes 이름{ from(직접 지정가능){ 시작모양 } to(직접 지정가능){ 끝모양 } } 애니메이션을 설정하고 - animation-name: (keyframes 의)이름 지정시 애니메이션..
-
css태그정리:transform등_210401(목)HTML&CSS 2021. 7. 21. 23:28
transform 속성 :이미지 변형 ☆요소 속성 translate (x,y): x축 y축으로 이동 (x,y따로 translateX,translateY으로 가능) translate3d (x축 , y축, z축): 3차원 이동 scale(x,y): x축 y축으로 확대,축소(위와 동일) scale3d (x축 , y축, z축): 3차원 확대, 축소 rotate:회전. 오른쪽회전 양수, 왼쪽회전 음수 rotate3d (x축 , y축, z축, 각도): 3차원 회전. skew: 왜곡, 비틀려도는 것. ' :hover ' : 커서 올릴 때 변화오게 하는 속성지정 transform-origin속성: right bottom; 기준점을 잡는 태그 위 속성들과 사용시 그 기준점에 모서리를 고정하고 변형됨..
-
css태그정리:포지셔닝_210331(수)HTML&CSS 2021. 7. 21. 23:24
CSS 포지셔닝 ☆box-sizing(width, height) 속성 : content-box(안의 내용을 적은 박스), border-box(=박스 전체 크기) margin > border > padding > content ☆float 속성 :배치 위치 float: left | right | none ☆clear 속성 :float을 무효화 clear: left | right | both 지정한 자리에서 움직이지 않는다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 box div..
-
css태그정리_210330(화)HTML&CSS 2021. 7. 21. 23:14
CSS 스타일과 스타일 시트 스타일 형식 1. head에 하는 방법 p{} 선택자: {와} 사이에 정의한 스타일 규칙이 적용될 대상. 같은 태그들 전체에 스타일을 줌. *{} = 전체선택자 태그{} = 태그선택자 #id이름{} = "#" id 선택자 .class이름{} = "." class선택자 태그,태그: 그룹선택자 id선택자와 class 선택자 구분 (1)공통점 요소의 특정 부분에만 (2)차이점 class: 문서안에서 여러번 반복 id: 문서안에서 한번만 사용 margin: 전체 바깥여백(위아래오른쪽왼쪽 따로 설정가능) font size -px 크기고정 em 배율(2배,3배) padding: 테두백리와 텍스트 사이의 여백 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16..
-
HTML강의(visual studio code), 기초태그_210329(월)HTML&CSS 2021. 7. 21. 23:00
HTML 파일 이름: index.html 문서안에 처음에 무조건 있는 파일 이름. 1 2 3 4 5 6 7 8 9 10 11 12 // html 열린 태그 //머리말 부분, meta 정보들 작성 //문자세트 //검색 시 이 정보로 치면 뜬다. Document //머리말 닫기 //몸통 부분 하나둘셋 html5 시작합니다. //몸통 닫기 //html 닫힌 태그 Colored by Color Scripter cs ● 제목 :heading. 제목을 나타내는 태그 h1 > h2 > h3 > h4 > h5 > h6 ● 내용 :paragraph. 텍스트 단락을 만드는 태그 ● :line break. 문단 내 줄바꿈 ● :horizontal rule. 가로줄 삽입 ● 인용문 :blockquote. 다른 ..