qqqwe

문자 관련 스타일 01. font-family 문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-family: '돋움', Dotum, Helvetica, sans-serif ; 02. font-size, 단위의 고찰 문자의 글자 크기를 지정하는 속성입니다. 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. CSS에서 유용하게 사용하는 단위에는 다음과 같은 것들이 있습니다. ▶px 해상도에 따라 상대적으로 달라지는 기본 단위로서, 다음과 같이 표현합니다. font-size: 12px; ▶% 부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위로서, 다..

flex flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다. display: flex; display: -webkit-flex; display: -ms-flexbox; 위의 구문은 해당 요소에 flex로 레이아웃을 설계한다고 선언한다는 뜻입니다. 예시 이미지 ▶ flex 지금은 float으로 세 개의 요소를 가로로 나열할 수 있습니다. flex로 구현한다면 다음과 같이 표현합니다. flex: 1; flex: 1;은 원래 flex: 1 1 0;의 줄인 표현입니다. 지금은 1 1 auto와도 같습니다. 또 1 1 100px와도 같죠. 앞이 1이면뒤가 뭐든 같은데, 이 세 값은 flex-grow, flex..

선택자란 CSS로 UI의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다. CSS로 속성을 부여하는 형식은 다음과 같습니다. 이 예문은 h1 요소에 배경색을 노란색으로, 글자색을 빨간색으로 지정한다는 의미를 담고 있습니다. [] 안에 여러 속성을 지정할 수 있고, 각 속성 설정 간에는 ' ; ' 으로 구분해주며 마지막 속성 끝에는 구분자를 생략할 수 있습니다. 속성은 가로로 붙여 써도 되고 다음과 같이 한 줄씩 따로 기술해도 무방합니다. type 선택자 HTML 문서의 태그 이름을 선택자로 사용할 수 있습니다. id 선택자 HTML 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다. HTML 요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야 ..

float block 요소는 원래 세로로만 나열되지만 float을 이용하여 가로로 배치할 수 있습니다. float은 레이아웃을 완성하기 위한 필수적인 속성이며 float을 지정하는 방법과 함께 float을 해제하는 방법도 알아두어야 나머지 레이아웃을 완성할 수 있습니다. float은 요소를 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 속성입니다. 세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려 할 때 매우 유용합니다. float한 박스에 가로 사이즈를 지정해 주어야 크로스 브라우징 됩니다. 그러나 heading 요소나 인라인 요소들은 가로 사이즈 없이 float해도 레이아웃이 흐트러지지 않습니다. float: left; 속성 값 속성 설명 left 요소를 왼쪽에 배치하고 나머지 콘..

이미지 출처 선택자 선택자란 CSS로 UI의 어느 부분을 디자인 할지, 즉 표현할 대상이 디는 부분을 말합니다. id 선택자 HTML 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다. HTML 요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야 하며, 다른 요소에 같은 id명을 또 주어서는 안됩니다. CSS에서는 id 선택자 앞에 '#'을 붙여야 합니다. id명이나 class명은 숫자로 시작할 수 없으며, 주로 영문잘 시작합니다. class 선택자 HTML 문서의 여러 요소 중 같은 이름을 갖는 요소들만 모아 따로 속성을 부여할 수 있습니다. HTML 요소에 같은 이름을 부여할 때에는 class로 이름을 붙입니다. 즉, 여러 개의 요소에 같은 class명을 ..

CSS란? CSS는 Cascading Style Sheets의 약자로 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. HTML이 몸을 담당한다면 CSS는 몸을 꾸미는 옷, 화장과 같은 일을 담당 한다고 할 수 있습니다. 내부 스타일시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결하는 방법입니다. 스타일은 css확장자를 가진 별도의 파일로 저장하고, HTML에서는 태그를 이용하여 선언합니다. 인라인 스타일 인라인 스타일은 태그에 직접 CSS를 정의해주는 기법으로, 해당 요소에 style=" " 형식으로 기술합니다. 인라인 스타..