UIUX 디자이너, 프론트엔드 학습 일지

이번 장에서는 css의 배치 특성에 대해 학습한 내용을 적어보려 한다. position 요소의 위치 지정 기준 요소를 배치할 때 어떤 기준을 먼저 잡고 위치 값을 설정해야 함 음수 사용이 가능하다. static : 기준 없음 relative : 요소 자신을 기준으로 한다. 이것을 활용한 배치는 거의 사용되지 않는다. absolute : 위치 상 부모 요소를 기준으로 한다. fixed : 뷰포트(브라우저)를 기준으로 한다. sticky : 스크롤 영역을 기준으로 한다. 요소 쌓임 순서(stack order) 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정 요소에 position 속성의 값이 있는 경우 위에 쌓임(기본값 static 제외) 위 조건이 같은 경우, z-index 속성의 숫자 값이 ..

저번 글과 이어 css 속성에 대해 학습한 부분을 기입해 보려 한다. 크기 계산(box-sizing) 요소의 크기 계산 기준을 지정해 준다. content-box : 요소의 내용으로 크기를 계산한다. border-box : 요소의 내용+패딩+보더로 크기를 계산 넘침 제어(overflow) 요소의 크기 이상으로 내용이 넘쳤을 때, 보임을 어떻게 제어할지 정하는 단축 속성 visible : 넘친 내용을 그대로 보여줌 hidden : 넘친 내용을 잘라냄 scroll : 넘친 내용을 잘라내고 스크롤바 생성 auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성 scroll의 경우는 넘치는 것이 없어도 스크롤바를 노출시키기 때문에 오토를 많이 사용한다. overflow-x : x축으로만 넘치는 것을 대응(..

이번 장에서는 css의 속성에 대해 학습한 내용을 적어보려 한다. 너비(width, height) - 박스 모델 wideth와 height의 기본 값은 auto max-width, height / min-width, height 최소 최대 넓이 높이 값도 지정 가능 CSS 단위 px : 필셀 em을 사용하지 않고 px을 사용하여 개발할 경우 사용자가 브라우저 설정에서 폰트 사이즈를 변경해도 개발자가 정해돈 폰트 사이즈에서 변경되지 않는다. 예를 들어 css에서 font-size를 24px로 설정해 두고 브라우저에서 사용자가 font-size를 40px로 바꾸려고 해도 화면에 표시되는 크기는 24px에서 변하지 않는다. % : 상대적 백분율 em : 요소의 글꼴 크기 em은 폰트 사이즈만큼을 1em으로 사..

저번과 동일하게 이번에도 CSS 개요 파트에 대한 내용을 기입하려 한다. 선택자_가상 클래스 어떠한 해동을 했을 때 동작하는 개념을 정의한다. hover 선택자 요소에 마우스 커서가 올라가 있는 동안 부여되는 성질 active 선택자 요소에 마우스를 클릭하고 있는 동안 부여되는 성질 focus 선택자 요소가 포커스 되면 선택되는 성질 first child 딸기 수박 오렌지 망고 예시 코드 css : .fruits span:first-child { color: red; } 를 부여하면 딸기 부분에 레드 컬러 부여 클래스 선택자 fruit의 span의 형제 요소 중 첫째라면 선택되는 방식 last child 딸기 수박 오렌지 망고 사과 예시 코드 css : .fruits h3:last-child { colo..