분류 전체보기
-
02-8⠀CSS 그리드 레이아웃 (css grid layout)web/HTML + CSS 2022. 3. 5. 14:28
https://studiomeal.com/archives/533 https://heropy.blog/2019/08/17/css-grid/ 1분 코딩 블로그, 헤로피님 블로그에서 참고를 많이 했씁니다 감사합니당. 가로와 세로 중 하나를 주축으로 정하여 레이아웃을 만드는 1차원 형태의 flex layout css grid layout 은 가로와 세로를 모두 사용하여 레이아웃을 만드는 2차원 형태 가로방향을 가리키는 줄 (row) 과 세로방향을 가리키는 칼럼 (column) 줄과 줄 사이, 칼럼과 칼럼 사이의 여백을 지정하여 원하는 형태의 레이아웃 구성 가능 그리드 컨테이너 (Grid container) : 그리드의 전체 영역이자 부모 요소 그리드 아..
-
02-7⠀CSS 플렉서블 박스 레이아웃 (flex box layout)web/HTML + CSS 2022. 3. 1. 16:12
https://studiomeal.com/archives/197 https://heropy.blog/ 1분 코딩 블르그와 헤로피님 블로그에서 참고 많이 했씁니다 감사합니당 사이트 전체 디자인이나 배열을 일관성있게 재배치 가능하게 하는 레이아웃 - 플렉서블 박스 레이아웃 flexible box layout (=flex box layout) 수직 / 수평 중 한쪽을 주축으로 정하고 박스를 배치 - CSS 그리드 레이아웃 css grid layout 수직 / 수평 상관없이 퍼즐 맞추듯 박스를 배치 플렉스 항목 (flex item) 들을 감싸는 플렉스 컨테이너 (flex container) 수평방향인 주축 (m..
-
02-6⠀CSS 반응형 웹과 뷰포트 / 미디어쿼리web/HTML + CSS 2022. 3. 1. 15:58
웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현해줌 모바일 기기 화면에 실제 내용이 표시되는 영역 사이에 태그를 이용하여 뷰포트 지정 *속성값 뷰포트 너비 : width="device-width" 또는 "크기" 뷰포트 높이 : height="device-height" 또는 "크기" 확대 / 축소 여부 : user-scalable="yes(=1,device-width=10,device-height=10 으로 간주)" 또는 "no" 초기 확대 / 축소 값 : lnitial-scale="1~10" (기본값은 1) *가장 많이 사용하는 속성 (웹 페이지 뷰포트의 너비를 스마트폰 화면 너비에..
-
02-5⠀CSS 트랜지션 / 애니메이션web/HTML + CSS 2022. 2. 23. 16:17
what the fuxx......... x,y,z 축 다나오는데 미쳐버리겠네 이거 개오바임 매트릭스도 배워야하는데 와우 !!!!!! 생활코딩 목차 ..? 차례 ..? 진짜 잘짜논듯.. 책 순서로 정리하는게 맞나 싶네..^^ 웹 문서에서 css 변형 함수를 이용하여 텍스트나 이미지 요소의 크기, 형태, 위치를 바꿀 때 사용 - translate() - scale() - rotate() - skew() 선택자 { transform: 함수(함수값); } * 2차원 변형 : 웹 요소를 평면에서 변형 (수평과 수직) x축은 값이 커질수록 오른쪽으로, y축은 값이 커질수록 아래쪽으로 * 3차원 변형 : 웹 요소를 평면과 함께 앞뒤로 변형 (수평과 수직 원근감) z축은 값이 커질..
-
02-4⠀CSS 고급 선택자 / 가상 클래스 / 가상 요소web/HTML + CSS 2022. 2. 23. 12:22
CSS 선택자 연습하기 게임 !! http://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io CSS 고급 선택자 - 연결 선택자 - 속성 선택자 둘 이상의 선택자를 연결해서 스타일이 적용될 요소를 지정 * =조합 선택자, 콤비네이션 선택자, 콤비네이션 셀렉터 하위 선택자 (= 자손 선택자) 상위 요소 하위요소 {^속성:속성값;^} 부모요소에 포함된 하위 요소를 모두 선택하여 스타일을 적용할 때 사용 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소를 선택 *section p { ...... } section 요소안의 모든 ..
-
css ...매일의 오늘 2022. 2. 23. 11:21
doit 교재 안에 포함되지 않는 부분들 ?? 은 생활코딩이나 인프런같은 강의 플랫폼에서 공부를 해야할 것 같다 그냥 커리큘럼 자체가 다른 것 같기도 하고... 확실히 근데 강의 플랫폼에는 없는 내용이 책에는 많이 있었다 html 까지는 그냥 신기하고 재밌고 쉽고 그랬는데 css 박스모델 부터는 확 갑자기 어려워 지는 느낌이 들었다 왜인지 생각해보니 전에 html ~ css 초반까지 배웠던 코드들을 기억하지 못하거나 어디에 쓰는지 감이 안잡혀서 그랬던것같다 배운 코드들을 써보고 실제로 적용해보지 않고 진도만 쭉쭉 나가다보니 내가 왜 이걸 공부하고 있나 갑자기 현타가 오기도 했다 내가 목표한 것들을 끝내기 위해 정해놓은 데드라인 기간까지 끝낼 수 있을까 긍정적인 미래가 있을까 확신이 안서기도 했다 배워야할..
-
02-3⠀CSS 배경 / 그라데이션web/HTML + CSS 2022. 2. 18. 15:49
선택자 { background-color: 16진수 / rgb(a); } 배경 색상을 지정 *이 속성은 하위 요소에게 상속되지 않음 선택자 { background-clip: 속성값; } 배경 범위를 지정 *속성값 border-box (기본값) : content padding border 범위를 배경으로 지정 padding-box : content padding 범위를 배경으로 지정 content-box : content 범위를 배경으로 지정 *background: 속성값 으로 간단히 나열 가능 선택자 { background-image: url ( '이미지파일경로' ); } 배경이미지 삽입 *이미지 파일은 .jpg .gif .png 사용 *해당 요소보다 이미지가 작을 경우 가로세로로 반..