You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🎨 CSS 박스(Box) 모델 한눈에 쏙 정리
CSS box-model HTML 요소는 기본적으로 박스 모델로 되어 있다. 태그를 통해 요소를 만들 때마다 새로운 box가 생기고 그 박스에 style을 주어서 문서를 꾸밀 수 있게 되는 것이다. 내용을 표시하는 영역(Content Area)부터 바깥 영역 여백(Margin)까지를 한 박스 모델의 영역이라고 보면 된다. Content : 태그 박스 안의 내용, 텍스트나 이미지 Padding : content 주위 영역 (태그 안) Border : padding과 content를 둘러싼 주위 영역 (태그와 밖의 경계) Margin : border의 밖 (태그와 태그 밖 밖깥 태그나 body 사이 영역) 콘텐츠 크기 속성 height / width / max-width / min-width 기본적으로 wi..
🎨 리스트(list) 스타일 속성 모음
목록 관련 CSS 속성 아메리카노 카페라떼 핫초코 아메리카노 카페라떼 핫초코 lists 속성 종류 속성 설명 list-style 모든 list-style 속성을 이용한 스타일을 한 줄에 설정할 수 있음. list-style-type 리스트 요소의 마커(marker)를 설정함. list-style-image 리스트 요소의 마커로 사용할 이미지를 설정함. list-style-position 리스트 요소의 위치를 설정함. list-style-image : 목록 마커를 이미지로 사용 none : 이미지가 없습니다. url : 사용할 이미지의 URL을 입력합니다. initial : 기본값으로 설정합니다. ul { list-style-image: url("../../media/examples/rocket.svg..
🎨 링크 박스 꾸미기 (a 태그를 버튼처럼 !)
CSS 링크 박스 꾸미기 링크(link)에는 color, font-family, background 속성 등 CSS의 다양한 속성들을 적용할 수 있다. 또한, text-decoration 속성값을 none으로 설정하여, 링크가 연결된 텍스트의 밑줄을 제거할 수도 있다. 링크 밑줄 제거 /* 링크 밑줄 제거 */ 홈으로 가기! 링크 상태 표현 ink : 링크의 기본 상태이며, 사용자가 아직 한 번도 해당 링크를 통해 연결된 페이지를 방문하지 않은 상태 visited : 사용자가 한 번이라도 해당 링크를 통해 연결된 페이지를 방문한 상태 hover : 사용자의 마우스 커서가 링크 위에 올라가 있는 상태 active : 사용자가 마우스로 링크를 클릭하고 있는 상태 focus : 키보드나 마우스의 이벤트..
🎨 CSS 선택자(Selectors) 문법 총정리 모음
기본 선택자 결합 선택자 요소간의 계층 관계를 결합하여 특정 요소나 하위 요소를 선택한다. 일치 선택자 E와 F를 동시에 만족하는 요소 선택 #EF{ margin: 0 auto; width: 1080px; } 자식 선택자 E의 자식 요소 F를 선택 #E>F{ margin: 0 auto; width: 1080px; } 자손 선택자 E의 자손(자식,손자, 등등 안에 있는 모든 태그들) 요소 F를 선택. 자식은 자손에 포함되어있다. 그러므로 자식 선택자를 E F로 써도 가능 #E F{ margin: 0 auto; width: 1080px; } 동위 선택자 동위 관계란 HTML 요소의 계층 구조에서 같은 부모 요소를 가지고 있는 요소들을 의미한다. 이러한 동위 관계에 있는 요소들을 형제(sibling) ..
🎨 요소 크기 값의 단위 ( % / px / em / vw )
CSS의 크기 단위 현실에선 cm, mm, inch 등의 단위도 존재하나, CSS에서 사용하는 대표적인 크기 단위는 px, em, %이다. px은 절대값이고 em, %는 상대값이다. 프로퍼티 값이 0인 경우, 단위를 생략할 수 있다. 대부분 브라우저의 폰트 사이즈 기본값은 16px, 1em, 100% 로 설정되어 있다. px 단위 px은 픽셀(화소) 단위이다. 1px은 화소 1개 크기를 의미한다. 22인치 LCD 모니터의 경우 해상도가 1680 * 1050 인데 이것은 가로에 1680개의 픽셀, 세로에 1050개의 픽셀을 가진다는 의미이다. px은 요소의 크기나 이미지의 크기 지정에 주로 사용된다. 그런데 픽셀은 디바이스 해상도(resolution)에 따라 상대적인 크기를 갖는다. 아래의 1920x108..
🎨 CSS 속성 상속 개념 & 적용 우선순위
CSS 속성 상속 CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있다. 상속하는 속성은 자식 요소에 영향을 미친다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않는다. property 상속 width/height no margin no padding no border no box-sizing no display no visibility yes opacity yes background no font yes color yes line-height yes text-align yes vertical-align no text-decoration no white-space yes position no top/right/bottom/left no z-index no overflow no float no ..
🎨 브라우저의 CSS 기본 스타일 초기화 하기
CSS 스타일 초기화 CSS 스타일 초기화는 브라우저마다 기본으로 제공하는 스타일이 있어서 기본값을 주기 위해 설정을 해주는 세팅이다. 각각의 브라우저(크롬,IE,사파리 등등)에는 브라우저마다 기본으로 제공하는 스타일이 있다. 예를 들면 margin, padding, font등 입력 양식 등의 차이가 있거나 기본 defalt값이 다르기 때문에 이러한 것들을 초기화 하면서 브라우저마다 스타일의 차이를 줄이고자 사용하는 것이다. 즉, HTML 요소에 내장된 고유 CSS 스타일 속성을 초기화 시켜서, 브라우저 간의 차이를 최대한 없애, 브라우저 요소들의 스타일이 0인 상태에서 디자인을 만들어 나가기 위해 생겨난 것이다. 크로스브라우징 (= 브라우저마다 동일한 모양) 구현할 때 유용하다. HTML 기본 CSS ..
🎨 CSS 기본 사용법 & 문법 정리
CSS(Cascading Style Sheets) 란? CSS는 HTML이나 XML과 같은 구조화 된 문서(Document)를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어입니다. 즉, CSS는 HTML의 각 요소(Element)의 style(design, layout etc)을 정의하여 화면(Screen) 등에 어떻게 렌더링하면 되는지 브라우저에게 설명하기 위한 언어입니다. HTML과 CSS는 각자의 문법을 갖는 별개의 언어이며 HTML은 CSS를 포함할 수 있습니다. 그러나 HTML없이 단독으로 존재하는 CSS는 의미가 없습니다. css 기본 문법 CSS의 문법은 선택자(selector)와 선언부(declaratives)로 구성됩니다. 선택자 - CSS를 적용하고자 하는 HTML 요..
