HTML/CSS

Semantic Tags & Semantic Tags? 시맨틱 태그는 문서의 구조와 의미를 브라우저에게 명확하게 설명한다. 시맨틱 태그를 사용하면 유저가 웹에서 검색 했을 때 웹페이지의 해당 코드를 찾아 그 정보를 기반으로 의미있는 내용을 출력되도록 도와준다. #또한

HTML tags html 파일의 구조는 다음과 같습니다. html 파일이라면 제일 첫 줄에 위치해야 하는 선언문입니다. 모습은 태그와 비슷하지만 HTML 태그는 아닙니다. 이 html 파일이 무슨 버전의 html을 사용했는지 브라우저에 알려주는 역할을 합니다. i

html attributes(속성)에는 다양한 것이 있습니다.각 태그에 이름을 주는 속성입니다.해당 id 이름은 오직 하나만 가질 수 있습니다.id는 해당 요소에만 넣고 싶은 디자인 적용할 때 사용합니다.여러 태그에 중복된 이름을 부여하는 속성입니다.하나의 태그에 2개

텍스트와 관련된 여러 스타일을 배워보도록 하겠습니다.font-family는 폰트 스타일을 지정하는 속성입니다.Georgia, "Times New Roman", Times, serif 라는 값을 해석해보자면, 브라우저가 Georgia라는 폰트를 지원해주면 Georgia

텍스트 정렬은 왼쪽정렬, 가운데정렬, 오른쪽 정렬이 있습니다.속성이름 text-align이고 값은 left, center, right입니다.모든 요소의 기본 정렬은 왼쪽 정렬입니다.span에는 오른쪽 정렬이 되도록 클래스를 부여하였는데도 오른쪽 정렬이 되지 않았습니다.

테두리와 이웃요소 사이의 간격인 마진 여역의 크기를 설정한다.마진영역은 패딩영역과는 달리 background-color 속성으로 설정하는 배경색의 영향을 받지 않는다.margin-topmargin-rightmargin-bottommargin-left모든 margin 속

Border는 테두리를 지정하는 것입니다.순서는입니다.선 스타일의 종류입니다.이 중에 거의 solid만 사용합니다.선 또한 윗 선, 오른쪽 선, 아래 선, 왼쪽 선 등 다양하게 스타일을 줄 수 있습니다.

말 그대로 스타일이 상속되어 자식에게도 샅은 스타일이 적용된다는 의미입니다.body라는 태그에 color는 빨간색으로, 크기는 14px로 스타일 했습니다. 글ㄴ데 p태그가 body태그 자식태그 일때 아무 스타일도 갖고 있지 않는데 부모인 body태그에 영향을 받아서

이번에는 selector표현과 우선순위에 대해 조금 더 깊게 배워보겠습니다.아래는 익숙한 css입니다.class나 id가 selector일 때 태그와 결합할 수 있습니다.첫 번째는 p태그이면서 p-tag클래스이다.두 번째는 p태그이면서 third-line이다. 라는 뜻

block과 inline개념을 알기 전에 display를 알고있어야 합니다. display는 CSS에서 레이아웃을 제어하기 위한 가장 중요한 속성입니다. 모든 엘리먼트에는 엘리먼트 유형에 따라 기본 표시값이 있습니다. 대부분의 엘리먼트에 대한 기본값은 보통 block이

static은 기본값입니다. position: static;이 설정된 엘리먼트는 그다지 특별한 방식으로 위치가 지정된 것이 아닙니다. 정적(static)엘리먼트는 위치가 지정된 것이 아니라고 표현하며, static이 아닌 다른 값으로 지정된 엘리먼트에 대해 위치가 지정

float라는 단어는 원래 뜨다라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다.left와 right를 통해 부유속성을 지정시 display는 무시됩니다. 또한 이후 요소에 clear속성이 있으면 페이지 흐름이 달라