개발기록장

float 속성을 이용하면 문서의 흐름과 관계없이 화면 배치를 유연하게 할 수 있다. 원래는 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성이었는데, 레이이아웃용으로 많이 사용된다. float이 적용된 요소는 기본적인 문서 배치의 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동시킬 수 있다. - float의 속성 값 • left : 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름. • right : 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. • none : 기본값(default), 요소를 띄우지 않음. ** left와 right 지정시 display 속성은 무시된..

display 속성은 웹페이지를 보고 있는 사용자에게 특정 요소(element)를 어떻게 보여줄지를 결정한다. display 속성은 매우 다양한 값을 가질 수 있지만, 가장 기본이 되는 block, inline, inline-block 을 비교해보자. - block display가 block으로 설정된 요소는 페이지에서 한 줄을 차지하거나, 부모 요소의 100%를 차지한다. 따라서 다음 태그는 그 다음 줄에 배치가 된다. 또한 가로(width)와 세로(height) 크기를 지정할 수 있다. 대표적으로 , , , 태그가 block을 기본값으로 갖는다. - inline display가 inline으로 설정된 요소는 태그안의 centent의 크기만큼을 차지한다. 이어서 오는 태그가 block이 아닐 경우에, ..

1. Semantic Web이란? - 의미 위키 백과에 검색해보면 시맨틱 웹(Semantic Web)은 아래의 의미를 갖는다고 나온다. 시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다. 웹의 창시자인 팀 버너스리가 1998년 제안했고 현재 W3C에 의해 표준화 작업이 진행 중이다. 쉽게 말하면 '의미론적인 웹'이란 말 그대로, 단순히 코드만 나열된 것이 아닌 의미를 지닌 웹이라는 것을 의미한다. - 등장 배경 시맨틱 웹..

CSS에서 flexbox는 box나 item들을 행/열로 유연하게 배치시킬 수 있게 해주는 속성들이다. Flexbox의 속성을 보기 전에 먼저 반드시 알아야 할 중요 개념 2가지가 있다. 1. container와 item flexbox를 구현하기 위한 속성 값들은 크게 container(=감싸고 있는 큰 박스)에 적용되는 속성 값과 item(=큰 박스 안에 있는 작은 박스들)들에 적용되는 속성값이 있다. 2. main axis와 cross axis flexbox에는 main axis(=중심축)과 cross axis(=반대축)이 있다. container안에 item이 왼쪽에서 오른쪽으로 정렬되어 있는 경우에는 수평축이 중심축이 되고, 수직축이 반대축이 된다. container안에 item이 위쪽에서 아래쪽..