하루하루 발전하는 개발자와 블로그🙌🏻 하루하루 발전하는 개발자와 블로그🙌🏻

분류 전체보기

• position:fixed; 를 사용할 때마다, 따라와야 할 것??!

  Study/css 2020. 4. 7. 23:56

  position: fixed; 를 사용할 때마다 내가 기억해서 함께 써 줘야할 코드는 바로 width: 100%; 이다. 왜?? 기본적으로 position: fixed 는 element를 기존 다른 것들에서 떼어내서, 다른 레이어에 올려놔야 함으로 너비값을 화면에 맞게 다시 설정해주어야함.

  Read More
• color: inherit;

  Study/css 2020. 4. 7. 23:45

  color: inherit; inherit => 상속받다, 유산받다. 즉, 부모값을 그대로 받다. 폰트의 색을 부모 값을 받는다는 말. a { color: inherit; } 이렇게 설정해두면, link걸려있어서 파랗게 변하는 아이콘이나 글자 등의 색을 파란색이 아니라, 부모의 값을 받는 색, 폰트값으로 정해둔 색을 받는 다는 말!

  Read More
• cursor 태그

  Study/css 2020. 4. 7. 23:26

  cursor : pointer tag를 넣은 선택자에 커서를 올릴시 커서가 포인트 모양, 즉, 손 모양으로 바뀌게 됨.

  Read More
• google fonts css에서 사용하기

  Study/css 2020. 4. 7. 22:57

  1. 구글 폰트에 들어간다. 내가 사용하고 싶은 폰트를 고른다. 2. 내가 원하는 굵기를 선택하며 customize 한다. **참고: 너무 많이 선택하면, 로딩타임이 느려짐.. 3. customize 된 폰트의 @import 주소를 따온다. 4. styles.css에 @import한다. 그리고 body값에 font-family: "폰트이름", -apple~~~값을 넣어준다. -apple-system, BilnkMacSystemFont,~~~는 "open sans" 폰트를 먼저 사용하는걸루 하구~ 없으면, 다음 폰트 사용하구~, 없으면 그 다음폰트 사용하구~~ 이런의미!

  Read More
• 카카오톡-클론코딩과정

  노마드코더/html+css (카카오클론-초급) 2020. 4. 7. 21:20

  1. 구현하고 싶은 각 페이지의 html태그들을 작성한다. 2. 각 페이지를 nav태그에 링크걸어 이동가능하게 만든다. 3. reset.css로 html 각 태그의 스타일 값을 0으로 만든다. 4. 전체 body값의 기본 배경컬러, 색컬러, 패딩 등을 설정한다. 5. 전체 페이지에서 위쪽 박스부터(또는 공통으로 구현되는 박스부터) 만들기. "status-bar.css" => 새로운 css 페이지를 만든 다음에는 항상 배경컬러를 바꿔보면서 제대로 구현이 되고 있는지, 연결이 됬는지 확인하기. .status-bar{ background-color: red; } **각 공통되는 또는 꾸밀 박스마다 css파일을 작게 여러개 만드는게 좋다. 파일이 커지면 계속 스크롤을 하면서 보는게 힘듦... 6. status-..

  Read More
• reset.css와 normalize.css

  Study/css 2020. 4. 7. 20:44

  CSS 도구 : reset CSS 수많은 html 태그들은 각각의 스타일을 가지고 있다. 각각 margin 값이나, padding 값이 다르다. 그리고 이게 브라우저 마다 태그의 스타일 값이 다르기도 하다. ex) h1의 크기나 마진값이 브라우저마다 각각 다르다거나.. reset.css 값을 주면 h1이든 h3이든 글자 크기가 모두 같아짐. 그래서 그 상태에서 각각 다르게 값을 주면서 꾸미기가 어려움. reset.css를 통해 모든 값들의 마진과 패딩을 0으로 줄 수 있다. 기본 줄 높이, 여백 및 제목의 글꼴크기 등과 같은 브라우저상의 불일치를 줄이는 것! 프로젝트를 시작할 때, 변경되지 않은 상태로 이것을 사용하는 것이 좋다. 그리고 내가 각각 꾸며주면 되는 것~! /* http://meyerweb...

  Read More
• 프론트엔드개발자 면접질문 2020. (html편)

  about front-end 2020. 4. 6. 23:24

  https://github.com/h5bp/Front-end-Developer-Interview-Questions 의 글을 번역하였습니다. h5bp/Front-end-Developer-Interview-Questions A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore. - h5bp/Front-end-Developer-Interview-Questions github.com What does a doctype do? How do you serve a page with content in multiple languages? What..

  Read More
• z-index 란?!

  Study/css 2020. 4. 5. 19:14

  우리들은 HTML 페이지를 2차원 평면으로 생각한다. 왜냐하면 여러 텍스트, 이미지와 다른 엘리먼트들이 서로 겹치지 않고 배열되기 때문이다. 하나의 렌더링 흐름만이 존재하며 모든 엘리먼트들은 다른 엘리먼트들이 어떤 공간을 차지하고 있는지 알고 있다. CSS 스타일 규칙을 보면 기본 렌더링 레이어(layer 0) 이외의 추가적인 레이어를 생성하고 여기에 박스를 위치시킬수 있다는 것을 알 수 있다. 레이어의 Z축 위치는 렌더링 될 때 쌓임 순서를 결정하는 하나의 정수로 결정된다. 큰 정수는 화면을 보고있는 사용자에게 가까운 것을 의미한다. Z축 위치는 z-index 속성 값을 설정함으로써 바꿀 수 있다. z-index CSS z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 ..

  Read More