본문 바로가기
반응형

CSS8

문자 관련 스타일 문자 관련 스타일 font-family 문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분합니다. 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. 사용 예시 font-family: '돋움', Dotum, Arial, Helvetica, sans-self; font-size 문자의 글자 크기를 지정하는 속성입니다. 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. CSS에서 유용하게 사용하는 단위들이 있습니다. 종류 단위 설명 px · 해상도에 따라 상대적으로 달라지는 기본 단위입니다. % · 부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위입니다. · 특별한 설정이 없다면 16px이 100%가 되므로, 150.. 2023. 3. 1.
레이아웃 - grid 유형 레이아웃 - grid 유형 grid layout은 비교적 직관적이어서 다른 레이아웃보다 사전지식이 덜 필요합니다. 일단 원하는 레이아웃을 먼저 스케치하고 그것을 위해 필요한 속성을 추가는 방식입니다. 이제 flex유형을 사용해서 예시를 만들어 보겠습니다. 1920px * 1080px의 사이즈에 1200px * 1080px 구역 레이아웃을 만들어 보겠습니다. 작성 방법 전체 구역을 만들어주고 각 구역을 하나씩 만들어 줍니다. grid 유형은 각 구역마다 주어야하기 때문에 모든 구역을 나눕니다. 테이블(표)처럼 가로, 세로가 몇 칸인지 확인 후 구역을 나누어줍니다. header 구역, nav 구역, aisde 구역, article1 구역, article2 구역, article3 구역, footer 구역을 만.. 2023. 3. 1.
레이아웃 - flex 유형 레이아웃 - flex 유형 flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하는 레이아웃을 잡는 것이다. display: flex;​ 위의 구문을 사용해서 해당 요소에 flex로 레이아웃을 설계한다고 선언하면 됩니다. flex 유형은 부모의 자식에만 사용할 수 있고 부모의 자식의 자식에는 사용할 수 없으니 참고하세요. 이제 flex유형을 사용해서 예시를 만들어 보겠습니다. 1920px * 1080px의 사이즈에 1200px * 1080px 구역 레이아웃을 만들어 보겠습니다. 작성 방법 전체 구역을 만들어주고 각 구역을 하나씩 만들어 줍니다. header 구역, nav 구역, main 구역, footer 구역을 만들어줍니다. he.. 2023. 3. 1.
레이아웃 - float 유형 - 반응형 레이아웃 - float 유형 - 반응형 https://dongjin6539.tistory.com/14 앞서 블로그에서 레이아웃 float유형에 대해 알아보았습니다. 지금 블로그에서는 사용자가 모바일을 사용해도 깨지지 않는 반응형에 대해 알아보겠습니다. 그럼 보러 가시죠!!! 예시를 만들어서 작성해보겠습니다!!! 1920px * 1080px의 사이즈에 1200px * 1080px 구역 레이아웃을 만들어 보겠습니다. 작성 방법 전체 구역을 만들어주고 각 구역을 하나씩 만들어 줍니다. header 구역, nav 구역, sectioin 구역, footer 구역을 만들어줍니다. head 태그에 style 태그를 입력해줍니다. 구역을 초기화 시키기 위해 전체 구역 *{ }에 margin: 0;, padding: 0.. 2023. 3. 1.
CSS 선택자 CSS 선택자 선택자란 CSS로 UI의 어느 부분을 디자인할지, 표현할 대상이 되는 부분을 말합니다. CSS로 속성을 부여하는 형식은 { } 안에 여러 속성을 지정할 수 있고, 각 속성 설정 간에는 ' ; ' 으로 구분해주며 마지막 속성 끝에는 구분자를 생략할 수 있습니다. 속성은 가로로 붙여 써도 되고 한 줄씩 따로 입력해도 무방합니다. 앞서 다른 블로그에서 id 선택자와 class 선택자에 대해 미리 알아보았습니다. 지금 이 블로그에서는 선택자의 모든 종류에 대해 간략하게 알아보겠습니다 선택자의 종류로는 type 선택자, id 선택자, class 선택자, 전체 선택자, 하위 선택자, 자식 선택자, 인접 선택자, 형제 선택자, 그룹 선택자, 속성 선택자, 가상클래스 선택자, 가상요소 선택자, 종속 선택.. 2023. 2. 24.
레이아웃 - float 유형 레이아웃 - float 유형 block 요소는 원래 세로로 나열되지만 float을 이용하여 가로로 배치할 수 있습니다. float은 레이아웃을 완성하기 위한 필수적인 속성이다. float을 지정하는 방법과 float을 해제하는 방법도 있다. 속성 값 설명 left 요소를 왼쪽에 배치하고 나머지 콘텐츠를 그 주변을 흐르도록 함 right 요소를 오른쪽에 배치하고 나머지 콘텐츠를 그 주변을 흐르도록 함 none float 실행을 취소할 때 사용 함 예시를 만들어서 작성해보겠습니다!!! 1920px * 1080px의 사이즈에 1200px * 1080px 구역 레이아웃을 만들어 보겠습니다. 전체 구역을 만들어주고 각 구역을 하나씩 만들어 줍니다. header 구역, nav 구역, aside 구역, sectioi.. 2023. 2. 24.
반응형