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

저번 글과 이어 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..

이번 장에서는 CSS의 개요에 대한 학습 내용을 적어보려 한다. CSS 개요 선택자 {속성:값;} 선택자는 스타일을 어디에 적용(html에 정의해 둔 것)할지 정하는 대상이다. 선언 방식 내장 방식 의 내용으로 스타일을 작성하는 방식 css의 내용을 html의 스타일이라는 태그 내부에다가 직접적으로 작성해서 html에 내장한다는 의미가 있다. ex) 링크 방식 link로 외부 css 문서를 가져와서 연결하는 방식 인라인 방식 요소의 style 속성에 직접 스타일을 작성하는 방식 html의 요소에 전역 속성이 style을 직접 추가해서 css 직접 작성하는 것 css 우선순위라는 개념에서는 이 방법이 너무 우선순위가 높아 단점이 있음 ex) @import 방식 css의 @import 규칙으로 css 문서 ..