Hello World

https://fontawesome.com/ Font Awesome fontawesome.com

CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공 한다. 조금 더 복잡한 레이아웃을 위해 우리는 CSS Grid를 사용할 수 있다. Grid Container를 위한 속성들은 다음과 같습니다. display 필수 Grid Item을 위한 속성들은 다음과 같습니다. position 속성은 웹 페이지 상에서 요소(Element)를 어떻게 배치하는지를 정해준다. absolute: 절대 좌표와 함께 위치를 지정해 줄 수 있습니다. relative: 원래 있던 위치를 기준으로 좌표를 지정합니다.(원래기준 못벗어남) 출처 중앙정보처리학원, https://heropy.blog/2019/08/17/css-grid/ CSS Grid 완벽 가이드 CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 ..

Elements 의 Attrubute를 선택 할 수 있다. ex) a Elements 의 target Attrubute

CSS pseudo-class 는 선택될 요소(element)의 특별한 상태를 지정하는 선택자(selector)에 추가된 키워드 이다. 예를 들어 :hover는 사용자가 선택자에 의해 지정된 요소 위를 맴돌(hover) 때 스타일을 적용한다. a:hover { background-color: yellow; } 출처 및 All CSS Pseudo Classes https://www.w3schools.com/css/css_pseudo_elements.asp CSS Pseudo-elements CSS Pseudo-elements What are Pseudo-Elements? A CSS pseudo-element is used to style specified parts of an element. For exa..

CSS 선택자(Selector) 끼리 결합이 가능하다 이를 결합자(combinators)라하고 대표적인 아래 4가지 유형을 알아보자. (주황 : style미적용 코드, 초록 : style적용코드) descendant selector (space) (자손) 결합자 ex) child selector (>) (자식) 결합자 ex) adjacent sibling selector (+) (인접형제) 결합자 ex) general sibling selector (~) (이전형제) 결합자 출처 https://www.w3schools.com/css/css_combinators.asp

HTML과 비슷하게, CSS도 특정한 기능을 하는들이 미리 정의되어 있으며, 이를 활용하여 태그의 스타일을 정의 할 수 있다. 속성: 값 의 형태로 사용되며, 여러 속성끼리는 ;를 통해 구분됩니다. 하나의 선택자의 속성들을 한 줄로 쓰든, 여러줄로 나누어 쓰든 상관이 없으며 작업하는 사람들 끼리 정하여 편한대로 사용하면 된다. HTML의 속성(attribute)과 CSS 속성(property)은 어떤 차이점이 있나? attribute 는 html 문서 안에서의 정적인(바뀌지 않는) 속성 그 자체를 의미하고, property 는 html DOM 안에서 동적인(바뀌는) 속성(또는 그 값)을 의미합니다. DOM 이란? 문서 객체 모델(The Document Object Model)은 HTML 문서의 프로그래밍..

1. CSS란? - Cascading Style Sheets 는 documents가 사용자에게 어떻게 보여질까를 기술하는 언어이다. - HTML이 정보를 표현한다면 CSS는 HTML문서를 시각적으로 이쁘게 꾸며주는 역할을 한다. 2. CSS로 기대되는 효과? - 정보(HTML)와 디자인(CSS)를 분리하여 관리할 수 있다. - 정보를 수정하지 않고 디자인만 변경할 수 있다. > 태그마다 style 속성으로 주게 되면 소스코드가 지저분해 지는데, 분리하여 관리하게 되면 유지보수 및 가독성이 좋아진다. - 검색엔진이 HTML을 해석 가능하도록 하기 때문에 더 많은 방문자들이 방문할 수 있도록 유도할 수 있다. > 시각장애인을 위한 스크린리더 프로그램이 HTML문서를 해석하도록 할 수 있다.(웹접근성) 3. ..