유자맛바나나의 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..

1. Display (Box 유형과 특성) 각 박스 태그에 Display 줄 수 있는 속성 값(박스 유형)은 블록(Block), 인라인(Inline), 인라인-블록(Inline-Block) 세 가지 유형이 있다. 세 가지 유형의 주요 특징은 다음과 같다. 특성 블록(Block) 인라인(Inline) 인라인-블록 (Inline-Block) 출력 시작 위치 새로운 라인(줄바꿈 됨) 현재 라인의 현재 위치(줄바꿈 X) 인라인 박스와 동일 타 박스들과의 관계 같은 라인에 다른 블록 박스들과 연속해서 표시 불가 같은 라인에서 다른 인라인 박스들과 연속해서 표시(줄바꿈 없음) 인라인 박스와 동일 박스 속성들의 사용 가능 여부 모든 박스 속성 지정 가능 박스 크기, 상하 마진 지정 불가 (width, height, ..

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 문서 내 유일한 요소에 스타일을 적용할 때 사용한다. 주로 , 와 같이 문서 내 ..

웹 사이트를 기획할 때 기본 구조를 잘 정의하는 것은 중요한 과제다. 간혹 모든 영역을 태그를 이용해 구조를 만든 웹 페이지를 볼 수 있는데, 이는 분명히 잘못된 구조이다. 각 HTML 태그마다 분명한 목적이 있고 해당 목적에 맞도록 잘 배치해서 사용해야 의미가 명확해지고 유지보수에 용이하며 웹 페이지 분석 프로그램에도 유리하다. 웹 사이트를 박스의 집합으로 바라보자 웹 페이지를 구성하는 박스의 역할을 할 수 있는 태그는 다음과 같은 것들이 있다 , , , , , , , , 과 의 차이점 예를 들어 설명하면 은 블로그에서 포스팅 1개로 볼 수 있다. 즉, 은 그 자체로 독립적으로 다른 페이지에서 보여줄 때 문제가 없을때 사용할 수 있다. 따라서 태그와 독립적으로 다른 곳에서 사용해도 문제가 없어야 한다...

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

정의 하이퍼 텍스트 마크업 언어(Hyper Text Markup Language, HTML)는 웹 페이지를 위한 지배적인 마크업 언어다. HTML은 웹 페이지 콘텐츠 안의 꺾쇠 괄호에 둘러싸인 "태그"로 되어있는 HTML 요소 형태로 작성한다. HTML은 웹 브라우저와 같은 HTML 처리 장치의 행동에 영향을 주는 자바스크립트와 본문과 그 밖의 항목의 외관과 배치를 정의하는 CSS 같은 스크립트를 포함하거나 불러올 수 있다. *출처: 위키피디아 *마크업 언어: 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다. 태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이었으나 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다. 이러한 태그 방법의 체계를 ..