명왕성의 공전기록

오늘은 쇼핑몰 만드는 반응형 웹페이지를 다시 만들었다. 그 중에서 이미 학습했지만, 당시에도 어려웠던 개념에 대해 다뤄본다. : after .card:after { content: ""; display: block; width: 100%; height: 100%; color: black; background-color: rgba(0, 0, 0, 0.7); position: absolute; top: 0; left: 0; opacity: 0; z-index: 1; } 먼저 :after의 기본활용은 이렇다. 내가 기존에 만들었던 요소에 어떤 특정효과를 주기 위해 활용한다. 가장 큰 이유는 굳이 효과를 주기 위해 HTML 내에 불필요한 요소를 집어넣는 이유가 큰 것 같다. :after 활용에서 주의해야 할 점..

12.23 반응형 웹페이지를 만드는 것은 오늘이 처음이었기 때문에 추가적인 연습이 필요하다 생각했고, 적당히 어려우면서 좋은 사이트를 발견했다. https://www.nixon.com 닉슨 시계 홈페이지 break-point는 연습했던 홈페이지처럼 두 군데로 나누어져 있지만, 안에 포함되어 있는 컨텐츠는 꽤 많은 분량을 차지하고 있는 편이다 현재는 위와 같은 형태까지 작업했다. 해결 해야 할 부분 1. 까만 배너 - 3개의 슬라이드 메시지가 균일한 속도로 올라오게 구현하기 (현재는 2개의 슬라이드가 위아래로 움직이는 방식) 2. 까만 배너 ~ 카테고리 - 까만 배너는 fixed / 카테고리까지는 sticky로 구현하기 (까만 배너를 fixed로 설정했을 때 아래 만들어두었던 레이아웃이 망가지는 현상이 있..

그리드 이전에 배웠던 것과 같이, flex와 상황에 따라 혼용해서 사용 disflay : grid => grid container로 변함 2차원적 구조를 가지며 row와 column의 배치방향을 동시에 설정할 수 있음 gird-template-rows gird의 행의 개수 및 크기를 지정할 수 있음 gird-template-rows : 1fr 2fr 200px => 행 3개 / 간격은 1fr, 2fr fr fraction(분수)의 약자, gird-template에서 사용할 수 있는 비율 단위 repeat(a,b) b규격의 grid-template을 a개 생성 gird-template-columns : repeat(4, 1ft) === gird-template-columns : 1fr 1fr 1fr 1fr..

transform 변형, 요소 이동, 회전, 확대축소, 비틀기 등 효과 줄 수 있음 속성 값 : translate(x,y) 요소를 좌표만큼 움직일 수 있음 / translateX(x) scale(x,y) 요소를 축소 혹은 확대 skew (x-angle, y-angle) 요소를 기울임 / ex) skew(15deg, 10deg) rotate(angle) 요소를 n만큼 회전시킴 / 시계방향 기준 .target1 { transform: translate(50%, 20%); } .target2 { transform: scale(0.8, 1.2); } .target3 { transform: skew(20deg, 20deg); } .target4 { transform: rotate(-45deg); } transfo..

Cascading CSS 우선순위 적용원리 중요도 2, 구체성 (명시도) / 상속 < 전체 < 태그 < Class,가상 < ID / !important 강제로 명시도 끌어올리기 (거의 안씀) 선언 순서 배경 그라데이션 - Background-image:linear-gradient(방향(to left), 시작색상, 종료색상) Background-position 위치 지정 가능 Background-repeat 반복 / no-repeat Backgorund-size 크기 지정 / cover 늘임 / contain 늘리되, 잘리지 않음 Background-attachment 백그라운드 단축 속성 (순서 중요) Background : color image repeat position/size attachment ..

몸살기운이 도졌는데, 생각보다 어렵지 않은 개념이라 다행이었다. .container p:First-of-type => class 'container' 안의 첫번째 p태그 Nth-of-type(n) Flex-wrap : wrap 자연스러운 줄갈이 Align-items 는 flex-item이 한줄일 때 우선적용 두줄 이상일 때는 align-content 사용 Flex-flow : flex-direction 과 flex-wrap을 합쳐놓은 단축 속성 Ex) flex-flow : column wrap Line-height 텍스트의 행간 설정 Letter-spacing 텍스트의 자간을 설정 Text-indent 들여쓰기 단위 절대단위 px pt(인쇄를 위한 단위) 상대단위 % em(font-size 속성값에 비례..

https://flukeout.github.io CSS diner https://flexboxfroggy.com/#ko flexfroggy Css 세 가지 적용 방식 인라인(in-line) 방식 Style 태그 이용 분리된 css파일 연결 선택자 First-child Last-child nth-child(n) = n번째에 적용 / 나누기 곱하기 빼기 가능 ex) 2n Hover = 마우스 올릴 때 css 효과부여 — Float 와 flex 레이아웃 Float(이제는 사용하지 않음) -> 반응형웹에 적합하지 않음 clear flex && grid 상황에따라 혼용 — Justify-contents : 중심축 방향 정렬 Align-items : 중심축 반대 방향 정렬 Align-items 는 flex-item..

브라우저 - 코드 실행기로 볼 수 있음 반응형 웹 - 화면 크기에 따라서 유동적으로 변경됨 html - 공간을 만들어 채워넣음 block tag - 행을 모두 공간으로 차지함(div) inline tag - 배당된 영역만 공간으로 차지함(span) 종속 tag - 부:자 관계를 갖는 태그를 의미 (select:option / ul:li) radio - 동그란 인풋창 생성 input - 인풋태그 내에 name을 활용하여 한 가지만 선택 가능하도록 할 수 있음 여성 남성 css 사용 방법 1. HTML 태그에 직접 활용 가능 / 별다른 지정이나 연결이 필요하지 않음 / 유지보수 불리 / 가독성 나쁨 2. style태그에 작성 / html 과 연결해주어야 함 3. css파일에 만들어 불러오기 / html 과 ..