왜 스타일을 리셋 해야되는걸까? 현재는 크롬, 파이어폭스, 네이버 웨일, 엣지 등 다양한 인터넷 웹 브라우저들이 있으며, 각각의 브라우저들이 제공하는 (User agent style sheet) 요소의 기본 스타일들이 다르다. 이러한 문제 때문에 분명 같은 스타일을 적용했음에도 불구하고 웹 브라우저들마다 다르게 보이는 현상이 발생한다. 그래서 기본적으로 스타일을 리셋을 하는 과정을 진행해야 된다. 에릭 마이어의 reset CSS 브라우저의 모든 기본적인 스타일 속성들을 완전히 초기화 시켜주는 코드 아래에 링크에 들어가면 초기화를 시킬 수 있는 코드가 작성되어 있다. https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Res..
Programming
CSS란? Cascading style sheets의 약자이며 style sheets → 웹 페이지 스타일을 정리해두는 문서를 의미하고 Cascading → 마치 폭포처럼 떨어지듯이 스타일이 적용될 때 우선순위를 가지고 적용되는 것을 의미한다. 간단하게 정리하자면 웹 페이지를 구성하는데 뼈대인 HTML이라는 것이 필요하다면 그러한 문서를 꾸며주기 위해 CSS파일을 사용한다는 것이다. CSS에는 어떻게 작성이 되어 있을까? 여기서 주의 해야될 사항으로는 HTML의 속성은 attribute로 표기하지만 CSS에서의 속성은 property로 표현한다는 것에 주의하도록하자 CSS 적용하기 CSS처럼 스타일만을 적용할 수 있는 파일이 만들어지기 전에는 HTML문서에 바로 스타일들을 적용을 하였다. 하지만 점점 스..
1. 후자 우선순위 2. 구체성(명시도) 우선순위 3. 중요성의 원칙 * 전체 선택자의 가중치는 0으로 가장 낮다. 자손 / 형제 / 직계 선택자 hello world hello hello world helloworld 구체성의 원칙 class가 아무리 동등한 점수를 가져간다고 해도 id의 우선순위를 이길 수 없다. 물론 type선택자가 아무리 많아져서 점수가 11점이 된다고 해도 class를 이길 수 는 없다. h1의 첫번째 h1의 두번째 h1의 세번째 h1의 네번째 hello 선택자 유의사항 공백이 있는 경우에는 class1의 자식요소에서 class2를 찾는 것이고 공백이 없는 경우에는 동일한 요소에서 있는 class이름을 선택하는 것이다. .class1 .class2 { } .class1.class..
마진(margin)이란? 요소의 네 방향 바깥 여백 영역을 의미하며, 요소들간에 공백을 둬서 구별하게 해주는 역할을 한다. 마진은 요소가 차지하는 전체 너비와 높이에 포함되지 않는다. CSS를 작성하다가 margin을 주었는데 내가 원하지 않은 사이즈의 margin이 들어가는 경우를 종종 확인 할 수 있다 이러한 상황을 마진겹침현상때문에 발생하게 된다. margin 겹침현상 (Margin-Collapsing) 마진겹침현상이란 사실 css를 만든 사람들이 의도한 동작이며 block-level요소와 block-level요소가 나란히(인접) 배치되어 있는 경우 상하단 마진(margin-top / margin-bottom)이 겹치는 현상이다. 좌우 마진은 마진겹침현상이 발생하지 않는다. 이러한 마진겹침현상은 사..
HTML 페이지에 이미지를 삽입하기 위해서 사용하는 태그 img 태그의 속성 src속성 이미지파일을 브라우저에 나타나게 하기 위해서 필수적으로 필요한 태그 로컬에 위치한 파일의 경로 및 파일명을 입력 경로를 입력하는 방법 2가지 절대 경로란? 처음(root)부터 위치를 입력해가면서 접근하는 경로 상대 경로란? 현재 내가 있는 디렉토리를 기준으로 접근하는 경로 alt(alternative text) 이미지가 브라우저 화면에 보이지 않을 경우 속성값에 적힌 텍스트를 대신 보여준다. 스크린리더와 같이 접근성을 위한 프로그램에 정보를 제공하기 위한 용도로 사용한다. 브라우저에게 이미지에 대한 정보를 전달함으로써 Search Engine Optimization에 도움을 준다. srcset 여러 해상도에 대응하여 ..
Text-level 요소의 특징 요소안의 컨텐츠의 크기(자식 요소)만큼만 영역을 점유 → block-level요소와는 가로줄 한라인을 모두 차지 한다는 점과 다른 특성 자식으로 Sections, Grouping Contents를 사용 할 수 없다. ex) span > div → 이러한 방식의 마크업뿐만 아니라 손자에 사용하는 것도 모두 문법오류가 된다. Text-level 요소의 종류 , 태그 줄바꿈의 위한 태그 텍스트 박스에서 한줄로 모두 표시가 안될때에만 줄바꿈이 일어나게 해줄 때 사용하는 태그 브라우저의 화면이 줄어들면서 공간이 좁아져 한줄로 표현이 되지 않을 때 줄바꿈을 해주는 역할 와 관련된 CSS속성 work-break default속성값 → normal word-break : break-wo..
표준 CSS 박스모델에서 요소의 전체적인 크기는 컨텐츠 박스 + 보더 박스 + 패딩 박스의 너비와 높이 값을 모두 더해 정해진다. 하지만 박스의 실제 크기를 얻기 위해 테두리와 패딩을 추가하는 것이 불편하다. 이러한 문제를 해결하기 위해 아래의 코드를 확인 해보자 hello world hello world
주요 내용 목차 간단한 용어 정리 block vs inline auto vs 100% content-box vs border-box 웹 사이트를 만들기 위해서 웹 사이트의 레이아웃을 확인(큰 덩어리가 보는 것이 필요하다.) 세부적인 사항(디테일 / 글자폰트, 두께, 사이즈 등..) 을 먼저 보지 않고 큰 레이아웃부터 확인 후 웹사이트를 제작하는 것이 좋다. 간단한 용어 정리 → 태그 Contents → 요소(Element) div { Style. → 선택자(Selector) } 같은 div를 사용하더라도 어디에서 어떤 용도로 사용하는지에 따라 부르는 용어가 다르다는 것을 간단히 알고가도록 하자 /* CSS파일 */ div { Type Selector(유형 선택자)라고 한다. background-color..
sections 태그들보단 조금 더 작은 범위의 묶음인 Grouping content 태그들에 대해서 알아보자 ,, 태그 목록을 만들때 사용하는 태그 주의사항 li요소는 ol(순서 order), ul요소(순서가없는 unorder) 와 반드시 함께 사용해야 된다. 목록을 표현할때는 최소 3개이상이 될 때 사용을 권장한다. ul과 ol안에는 직계 자식은 무조건 li이어야된다. 절대 제목같은것을 넣을려고 ul,ol 다음 자식요소로 집어넣으면 안된다. li의 자식요소들의 어떠한 요소들이 와도 상관이 없다. 직계자식이란? 바로 자기자신의 바로 위의 부모요소를 의미한다. 순서가 존재하는 목록 순서가 존재하지 않는 목록 , , 태그 사전처럼 어떠한 것을 정의할 때 사용하는 목록 주의사항 태그 안에는 직계자식으로 만을..
HTML 요소(Element)에 대해서 알아보자 / / / 등의 요소들은 HTML 문서를 만들 경우 가장 기본이 되는 요소들이다. 특히 는 뼈대인 html 파일과의 외부파일을 연동 시켜주기 위한 중요한 태그라고 볼 수 도 있다. 옛날의 경우 html파일안에 , 같은 태그등을 사용하여서 자주 사용하였지만 요즘에는 많이 외부에서 연결을 하고 있다. 물론 필요한 경우에는 html내부에서 작성을 해주기도 한다. Sections 태그 실제 사용자에게 보여지는 태그등이 존재하는 가장 상위의 태그 태그 특정한 컨텐츠의 시작 부분을 나타내는 태그 일반적으로 웹 사이트의 제일 상단에서 구역의 제목을 나타낸다. 를 header안에 자주 사용 (웹 사이트에서 은 되도록이면 한개를 사용하는 것을 권장) 태그 독립적으로 구분..