유자맛바나나의 Dev-log

Flexbox란? Flexbox는 Flexbox는 크게 'Container와 Item' 그리고 '중심축과 교차축' 두 가지 개념으로 이해한다. 개념 1. Container와 Item 첫번째는 Container와 Item의 개념이다. flex를 적용하기 위해선 Item을 담기 위한 Container tag의 display 속성을 flex로 적용하면 된다. 그리고 Container와 Item 각각에 적용되는 속성들을 파악해 적절한 속성값을 파악해 적용하는 것이 중요하다. 적용1과 적용2에서 display와 flex-direction을 이용해 기본 적용 예시를 살펴보고, Container 속성과 Item 속성을 하나씩 적용해보며 Flexbox를 이해한다. 적용1. flex box 적용 HTML item1 it..

Selector: HTML의 어떤 tag를 고를 것인지 규정하는 문법 Selector의 종류 Selector 기호 역할 및 설명 Universal * 모든 tag에 적용하는 기호 Type tag명 특정 tag에만 적용 State : 콜론 기호는 CSS에서 State라 부르며 마우스 hover와 같은 상태에 따라 스타일링 한다. tag 명 옆에 붙여서 작성한다. Attribute [속성명] Attribute라 부르며 속성을 갖는 tag를 스타일링 한다. tag 명 옆에 붙여서 작성한다. ID #id 해당 id를 갖는 곳에만 적용 Class .class 해당 class를 지정한 곳에 적용 [참고] ID와 Class의 차이 ID 문서 내 유일한 요소에 스타일을 적용할 때 사용한다. 주로 , 와 같이 문서 내 ..

정의 종속형 시트 또는 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(style sheet language)로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. 레이아웃과 스타일을 정의할 때의 자유도가 높다. 마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다. 출처: 위키피디아 웹사이트 Styling에 적용되는 세 가지 웹사이트에 적용되는 스타일링은 아래와 같이 세 가지가 있다. 이 때 스타일링은 Author style > User style > Browser style 순의 우선 순위로 적용된다. 즉, Author styl..