SEOLHEE

CSS 문자 관련 스타일 아무리 웹에서 이미지나 비디오의 비중이 커지더라도 텍스트는 웹에서 빠질 수 없는 핵심적인 요소일 것입니다. 웹에서 텍스트를 스타일하기 위해서 사용할 수 있는 CSS 속성에 대해서 알아보겠습니다. 01. font - family 문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-family: '돋움', dotum, arial, Helvetica, sans-serif; 02. font - size 문자의 글자 크기를 지정하는 속성입니다. 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. css에서 유용하게 사용하는 단위에는 다음과 같..

grid layout 그리드는 그리드를 선언하는 요소와 하위의 자식 요소들로 구성됩니다. 그리드를 구성하는 자식요소들을 "아이템" 이라고 하며, 자식 요소들의 태그 종류에 관계 없이, 그리드 바로 하위의 자식요소들만 아이템이 됩니다. 그리드 선언은 css 속성으로 아래와 같이 시작합니다. display : grid; 그리드 속성 선언 만으로는 자식 아이템들에 아무런 영향을 미치지 않습니다. 추가 그리드 속성이 정의되지 않으면 "display: grid;" 는 "display: block;" 과 같습니다. 레이아웃 grid 유형 (예제) 결과 grid와 flex의 차이점 flex box는 한 줄로 된 행 혹은 열 방향의 레이아웃과 같이 일차원의 레이아웃을 염두에 두고 설계되었지만, grid는 행과 열 모두..

flex flex는 flexble의 준말로 유동적인 레이아웃을 손쉽게 만들 수 있다는 의미를 가진다. 기존의 웹페이지를 만들 때 사용하던 올드한 레이아웃 제작방법을 개선하고자 flexbox가 생겨났다. flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다. display: flex; display: -webkit-flex; display: -ms-flexbox; 위 구문은 해당 요소에 flex로 레이아웃을 설계한다고 선언한다는 뜻입니다. 필수 지정 속성 1. display : flex; 2. flex-direction : 방향; flex를 활용하기 위해서는 부모에 필수적으로 달아줘야하는 css 속성이 있..

Float float는 그대로 번역하자면 '띄우다'라는 뜻입니다. float는 css에서 정렬하기 위해 사용되는 속성입니다. 예를 들어, 문서에 사진과 그림이 있을 때, 그림을 왼쪽이나 오른쪽으로 띄워서 정렬하거나 각 객체를 오른쪽이나 왼쪽으로 정렬하여 전체 문서를 배치(layout) 할 때도 사용할 수 있습니다. Float 속성 값 none : 요소를 띄우지 않음 (기본값) left : 요소를 왼쪽에 띄움 right : 요소를 오른쪽에 띄움 initial : 기본값으로 설정함 inherit : 부모 요소로부터 상속함 Float 해제(clear) 'float' 속성이 적용되지 않도록 지정(해제) 'float: left' 를 해제하려 한다면, 해제되길 원하는 요소 css에 'clear :..

선택자(selector) 선택자란 CSS로 UI의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다. CSS로 속성을 부여하는 형식은 다음과 같습니다. 1. type 선택자 CSS의 선택자 중 하나인 타입 선택자는 HTML 요소의 태그 이름을 이용해 스타일을 적용합니다. 예를 들어, p 선택자는 모든 태그에 스타일을 적용합니다. h1 { ... } p { ... } 2. id 선택자 CSS에서 ID 선택자는 # 기호를 사용하여 정의됩니다. ID 선택자는 특정 요소의 ID 속성을 기반으로 스타일을 적용합니다. 예를 들어, #myElement는 요소를 선택합니다. #cssid { ... } 3. class 선택자 CSS에서 class 선택자는 . 기호를 사용하여 정의합니다. 예를 들어, 와 같..

선택자(selector) 선택자란 CSS로 UI의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다. CSS로 속성을 부여하는 형식은 다음과 같습니다. 선택자의 종류 type 선택자 id 선택자 class 선택자 등이 있습니다. 그 중에서 id 선택자와 class 선택자 그리고 둘의 차이점을 알아보겠습니다. 1. id 선택자 id 사용할 때 중요한 것은 한페이지에서 한번만 사용이 가능합니다. id는 페이지 내에서 특정 위치나 태그를 지정하는 것이기 때문에 오직 페이지내에서 한번만 사용할 수 있습니다. css에서의 정의하는 방법은 #id_name{속성명:속성값; 속성명:속성값;} 이런식으로 적용합니다. 2. class 선택자 자주 사용되는 스타일에 적용하는 것이라고 생각하시면 됩니다. 예를 ..

1. Inline : 해당 요소에 직접 스타일 속성을 적용 직접 태그에 스타일을 적용하는 방법입니다. 통일성 및 가독성을 해치며 유지보수가 어렵기 때문에, 특수한 경우에만 제한적으로 사용합니다. Inline https://seolheeone.tistory.com/ 2. Internal : head태그 > style태그에 작성하는 법 head 태그 내에 style 태그를 이용해서, HTML 내의 전체 태그에 서식을 적용합니다. 전체 웹페이지에 적용되기 때문에 global 방식이라 부르기도 하고, head 태근에 스타일을 정의하기 때문에 embedded 방식이라고도 합니다. body 태그 내의 h2는 모두 빨간색이고 40px 크기로 출력됩니다. 3. Extermal : 외부 스타일 시트 파일 이용. link..