Study
-
reset.css와 normalize.cssStudy/css 2020. 4. 7. 20:44
CSS 도구 : reset CSS 수많은 html 태그들은 각각의 스타일을 가지고 있다. 각각 margin 값이나, padding 값이 다르다. 그리고 이게 브라우저 마다 태그의 스타일 값이 다르기도 하다. ex) h1의 크기나 마진값이 브라우저마다 각각 다르다거나.. reset.css 값을 주면 h1이든 h3이든 글자 크기가 모두 같아짐. 그래서 그 상태에서 각각 다르게 값을 주면서 꾸미기가 어려움. reset.css를 통해 모든 값들의 마진과 패딩을 0으로 줄 수 있다. 기본 줄 높이, 여백 및 제목의 글꼴크기 등과 같은 브라우저상의 불일치를 줄이는 것! 프로젝트를 시작할 때, 변경되지 않은 상태로 이것을 사용하는 것이 좋다. 그리고 내가 각각 꾸며주면 되는 것~! /* http://meyerweb...
-
z-index 란?!Study/css 2020. 4. 5. 19:14
우리들은 HTML 페이지를 2차원 평면으로 생각한다. 왜냐하면 여러 텍스트, 이미지와 다른 엘리먼트들이 서로 겹치지 않고 배열되기 때문이다. 하나의 렌더링 흐름만이 존재하며 모든 엘리먼트들은 다른 엘리먼트들이 어떤 공간을 차지하고 있는지 알고 있다. CSS 스타일 규칙을 보면 기본 렌더링 레이어(layer 0) 이외의 추가적인 레이어를 생성하고 여기에 박스를 위치시킬수 있다는 것을 알 수 있다. 레이어의 Z축 위치는 렌더링 될 때 쌓임 순서를 결정하는 하나의 정수로 결정된다. 큰 정수는 화면을 보고있는 사용자에게 가까운 것을 의미한다. Z축 위치는 z-index 속성 값을 설정함으로써 바꿀 수 있다. z-index CSS z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 ..
-
height: 100% vs 100vhStudy/css 2020. 4. 3. 21:59
.container{ background: beige; height: 100%; } height: 100%; 라는 의미는 선택자 즉, .container가 들어있는 부모의 100%를 채우겠다는 말. html파일이 이렇게 되어있다면, container의 부모는 body 인것이다. body { height: 100%; } .container{ background: beige; height: 100%; } 그럼 body에 높이 100% 값을 추가해보자. 그러나, 그래도 아무런 변화가 없음. 그래서 body, html { height: 100%; } .container{ background: beige; height: 100%; } body뿐 아니라 html의 값도 같이 설정해줘야한다. 그러나 만약 내가 이렇게..
-
flex-boxStudy/css 2020. 4. 3. 21:52
flex-box는 CSS의 꽃이라 할 수 있음. flex-box 사용의 유래 아주 예전에는 모든 브라우저에서 호환 가능하고 강력하게 레이아웃을 만들기 위해선 position, float, table 등을 이용했었다. 근데 너무 복잡하고 할 수 없는 기능도 있었다. 사이즈상관없이 동일한 간격으로 놓기.. 같은거.. 이젠, flex-box가 있어서 이런것들을 손쉽게 할 수 잇음 **float을 먼저 알아보자. float의 원래의 목적은 이미지와 텍스트를 함께 놓을 때, 어떻게 함께 배치할 지 정리하기 위해 나타난 아이었다. 예전에는 레이아웃 할만한 도구들이 없었어서 float을 레이아웃을 위해 사용했었는데, 이젠 flex-box가 있으므로 float은 원래 용도로만 사용~~! flex-box는 크게 2가지만..
-
CSS란??Study/css 2020. 4. 3. 19:30
CSS. Cascading Style Sheet Cascading Style Sheet = 스타일을 잘 정리한 문서한 장. cascade 폭포처럼흐르다. 무언가 연속해서 흐르는 느낌 = Cascading Style Sheet 예를들어, 브라우저에 버튼이 보여질때, 브라우저에서 css가 작성된 문서에 "야, 너희 이 버튼에 관련된 스타일링있어?" "없는데?" 하면 다시 또 이번엔 브라우저에 기본적으로 있는 문서에 "야, 너희 이 버튼에 관련된 스타일링 있어?" 묻는다. 기본값문서에 스타일링이 있으면 그 값을 가져와서 브라우저에서는 기본값으로 보여지는 것! 이렇듯, cascading 은 정의된 지정된 값이 있다면 그것을 쓰고, 그 값이 없다면 정의된 기본값으로 사용하는 것을 나타낸다. 웹사이트를 스타일링 할..
-
label tagStudy/css 2020. 4. 3. 18:22
Do you like cheese? Do you like peas? input 옆에 라벨링처럼 input을 설명해주는 것 을 요소와 연결하면 몇 가지 이점이 있습니다: label 텍스트는 텍스트 입력과 시각적으로 관련이 있을뿐만 아니라 프로그래밍적으로도 관련이 있습니다. 예를 들어, 화면리더기(screenreader) 는 폼 입력(form input)에서 label 을 읽어서 보조기술(assistive technology) 사용자가 입력해야하는 텍스트가 무엇인지 더 쉽게 이해할 수 있게 합니다. 관련 label 을 클릭해서 input 자체에 초점을 맞추거나 활성화를 시킬 수 있습니다. (활성되어서)늘어난 누를 수 있는 영역(hit area)은 터치스크린 사용자를 포함해 입력하려하는 모든 사람에게 이점을 ..
-
자바스크립트의 역사와 현재 그리고 미래!(드림코딩)Study/JavaScript 2020. 4. 1. 22:13
https://www.youtube.com/watch?v=wcsVjmHrUQg 개인을 위한 요약정리입니다:) 더 자세한 내용은 영상을 이용하세요!! 1993년. 컴퓨터도 잘 모르는 사람들도 쉽게 쓸 수 있는 ui 요소가 더해진 첫번째 Mosaic Web Browser가 나온다. Mosaic Web Browser 의 개발팀을 이끌던 Marc Andreessen은 대학교를 졸업함과 동시에 Nescape라는 회사를 설립. 1994년. 회사에서 이 전에 만들었던 Mosaic Web Browser 기술을 더해 조금 더 ui요소가 더해진 Netscape Navigator를 만든다. 이당시에는 html와 css로 간단하게 웹페이지를 만들 수가 있었다. page와 page 에 링크를 걸어서 페이지 이동만 가능한 정말 ..