cakecoder cakecoder

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) : 그리드의 전체 영역이자 부모 요소 그리드 아..

https://studiomeal.com/archives/197 https://heropy.blog/ 1분 코딩 블르그와 헤로피님 블로그에서 참고 많이 했씁니다 감사합니당 사이트 전체 디자인이나 배열을 일관성있게 재배치 가능하게 하는 레이아웃 - 플렉서블 박스 레이아웃 flexible box layout (=flex box layout) 수직 / 수평 중 한쪽을 주축으로 정하고 박스를 배치 - CSS 그리드 레이아웃 css grid layout 수직 / 수평 상관없이 퍼즐 맞추듯 박스를 배치 플렉스 항목 (flex item) 들을 감싸는 플렉스 컨테이너 (flex container) 수평방향인 주축 (m..

웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현해줌 모바일 기기 화면에 실제 내용이 표시되는 영역 사이에 태그를 이용하여 뷰포트 지정 *속성값 뷰포트 너비 : width="device-width" 또는 "크기" 뷰포트 높이 : height="device-height" 또는 "크기" 확대 / 축소 여부 : user-scalable="yes(=1,device-width=10,device-height=10 으로 간주)" 또는 "no" 초기 확대 / 축소 값 : lnitial-scale="1~10" (기본값은 1) *가장 많이 사용하는 속성 (웹 페이지 뷰포트의 너비를 스마트폰 화면 너비에..

what the fuxx......... x,y,z 축 다나오는데 미쳐버리겠네 이거 개오바임 매트릭스도 배워야하는데 와우 !!!!!! 생활코딩 목차 ..? 차례 ..? 진짜 잘짜논듯.. 책 순서로 정리하는게 맞나 싶네..^^ 웹 문서에서 css 변형 함수를 이용하여 텍스트나 이미지 요소의 크기, 형태, 위치를 바꿀 때 사용 - translate() - scale() - rotate() - skew() 선택자 { transform: 함수(함수값); } * 2차원 변형 : 웹 요소를 평면에서 변형 (수평과 수직) x축은 값이 커질수록 오른쪽으로, y축은 값이 커질수록 아래쪽으로 * 3차원 변형 : 웹 요소를 평면과 함께 앞뒤로 변형 (수평과 수직 원근감) z축은 값이 커질..

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 요소안의 모든 ..

선택자 { 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 사용 *해당 요소보다 이미지가 작을 경우 가로세로로 반..

웹 문서에서 내용을 배치할 때, 각 요소를 박스 형태로 구현하는 것을 말함 각 박스모델은 콘텐츠영역과 테두리, 여백 (padding / margin) 으로 구성됨 블록 레벨 요소 : 웹 문서에 삽입할 때 너비가 100% 인 요소 * 등 *양 옆으로 다른 요소가 올 수 없음 인라인 레벨 요소 : 웹 문서에 삽입할 때 콘텐츠만큼만 영역을 차지하는 요소 * 등 *인라인 레벨 요소의 콘텐츠 영역 외에 나머지 공간에 다른 요소 삽입 가능 * 콘텐츠 영역 (content / element) : 요소가 담고 있는 내용 * 패딩 (padding) : content 와 bord..

선택자 { font-family: "글꼴 이름1", 글꼴이름2, 글꼴이름3 } 웹 문서에서 사용할 글꼴을 지정 *글꼴이 없을 경우를 대비하여 두번째, 세번째 글꼴까지 지정 *띄어쓰기가 들어간 두 단어 이상의 글꼴 이름은 "" 큰 따옴표로 묶음 *한번 글꼴을 정의하게 되면 문서 안의 모든 자식요소에 같은 글꼴을 사용 선택자 { font-size:값 } 웹 문서에서 사용하는 글자의 크기를 지정 *키워드 사용시 xx-small < x-small < small < medium < large < x-large < xx-large *단위 사용시 (주로 사용) px / pt / ex em (=16px 12pt , 자기 자신 또는 부모요소에 상속받음) rem (상대적인 값으로 html 태그에게 상속받음 - 거의 뭐 조..