FrontEnd/CSS
-
[HTML & CSS] Google Clone (2) 내비게이션, 검색FrontEnd/CSS 2021. 2. 22. 18:22
Google 페이지를 클론코딩하는 작업을 했다. 기능적인 부분은 무시하고 외양에만 집중했다. 분량 이슈로 나머지는 아래쪽에서 마무리했다. 2021/02/21 - [FrontEnd/Prep] - [HTML & CSS] Google Clone (1) Flex Container, 로고, footer [내비게이션] svg, justify-content: flex-end; vertical-align: middle; inline whitespace 내비게이션에는 Gmail, 이미지, 다른 기능 추가 로드, 로그인 버튼의 총 4가지가 필요하다. 그리고 화면 오른쪽에 정렬돼야 한다. 전체 블록을 차지하는 div 안에 작은 div로 오른쪽 영역이 다시 한번 묶여있고, Gmail, 이미지가 한 묶음, 추가 로드버튼과 로그..
-
[HTML & CSS] Google Clone (1) Flex Container, 로고, footerFrontEnd/CSS 2021. 2. 21. 15:45
Google 페이지를 클론코딩하는 작업을 했다. 기능적인 부분은 무시하고 외양에만 집중했다. 분량 이슈로 나머지는 아래쪽에서 마무리했다. 2021/02/22 - [FrontEnd/Prep] - [HTML & CSS] Google Clone (2) 내비게이션, 검색 먼저 페이지를 Box 단위로 나누어 보았다. 큰 박스 6개가 제일 먼저 눈에 띈다. 위의 로그인 메뉴는 내비게이션인 것 같고, 로고는 아무 기능이 없는 그냥 로고 이미지, 중간의 검색창이 메인으로 보인다. 검색창 아래에는 현재 설정된 언어를 보여주는 부분이 나오고, 그 아래로 접속한 국가, 마지막으로 정보 및 약관 라인이 있다. 순서대로 nav, div, main, section, footer(div(접속국가), div(정보 및 약관) 태그로 ..
-
[CSS] Font, BackgroundFrontEnd/CSS 2021. 2. 21. 00:16
Background -해당 요소의 배경을 지정한다. 이미지나 색상이 올 수 있다. 설정 가능한 속성은 이쪽: developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders -이미지를 사용하고 싶은 경우 background-image: url("파일경로");를 쓴다. 여러 이미지를 겹쳐서 사용할 수도 있다. 먼저 설정한 이미지가 앞으로 온다. 아래의 repeat, size 등은 이미지 별로 지정 가능한데, 쉼표로 구분해야 한다. -이미지가 화면 크기보다 작은 경우 background-repeat를 이용해서 채우기를 할 수 있다. 기본값은 repeat이고 화면에 반복 출력된다. 반복하지 않으려면 no-repeat을 쓴다. 가로나 세로로만 채우고 싶..
-
[CSS] Box Model , Display, Position, floatFrontEnd/CSS 2021. 2. 19. 02:45
BoxModel Box에는 content, padding, border, margin이 있다. -박스 크기는 이렇게 구해진다. 너비: width + left/padding + left/border + left/margin 높이: height + top/bottom padding + top/border + top/bottom margin -값을 따로 정하지 않으면 기본값 auto가 적용된다. (margin에 auto를 주면 브라우저 중앙에 위치하게 된다.) -값을 지정할 경우 px, % 등의 단위를 쓴다. 박스모델 관련 속성은 상속되지 않는다. -top, right, bottom, left가 모두 같다면 margin: 25px; 처럼 한번에 지정해도 된다. -box-sizing 프로퍼티는 content-b..
-
CSS - 선택자, 속성값, Reset CSSFrontEnd/CSS 2021. 2. 17. 17:11
CSS(Cascading Style Sheets)는 HTML 같은 문서를 화면에 어떻게 표현할 것인지를 정의하는 언어다. Rule Set(구문) 위와 같은 구문을 Rule Set 혹은 Rule이라고 부른다. 이런 Rule Set을 모아둔 시트를 Style Sheet라고 부른다. Selector(선택자) CSS 구문에서 스타일을 적용할 HTML element를 선택하는 부분을 Selector라 부른다. -HTML 문서 내의 모든 요소를 선택하고 싶다면 * 키워드를 사용할 수 있다. (head 태그와 html 태그도 포함된다.) -* 키워드를 이용해 상속되지 않는 box-sizing 프로퍼티를 상속시킬 수도 있다. *, *:before, *after { box-sizing: inherit; } -HTML e..