본문 바로가기

CSS43

[사이트 만들기] 이미지 유형 01 - 이미지 위에 설명, 버튼 넣기 사이트 만들기 : 이미지 유형 01 이번 포스팅에서는 Figma에서 만든 이미지 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 이번에 만들 웹 사이트의 유형은 이미지 위에 제목과 본문(설명), 버튼을 올려놓는 간단한 방식이다. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하고, 이미지는 img 태그가 아닌 article 태그에 CSS로 나중에 추가해줄 것. 자세한 설명은 아래 예시 코드의 주석처리 내용을 참조할 것. 별빛 제빵교실 개강소식🍞 별빛 제빵교실이 2022년 8월 23일 개강합니다. 수강신청 기회는 지금 뿐이니 서두르세요! 나만의 제빵 포트.. 2022. 8. 17.

[CSS] 기본 문법 - 스타일시트를 불러오는 방법들 정리 CSS 기본 문법 CSS 정의 방법에는 내부 스타일시트, 외부 스타일시트, @import 방식, 인라인 스타일시트 총 4가지가 있다. 이 중 외부 스타일시트가 많이 사용되며 CSS 코드가 적은 경우 내부 스타일시트가 사용된다. 인라인 스타일시트는 잘 사용되지 않지만 우선순위를 높여야 할 때 간혹 사용된다. 또한 CSS에서의 주석 처리는 /* */ 로 한다. 이번 포스팅에서는 4가지 CSS 정의 방법에 대해 살펴보고자 한다. 01. 내부 스타일시트 CSS를 HTML 문서 내에 태그로 기재하여 사용하는 방법으로 코드 양이 적을 때 사용한다. 안녕1 결과 보기 안녕1 02. 외부 스타일시트 스타일 속성을 따로 저장하여 HTML 문서에 파일명으로 연결하는 방법. 스타일 속성은 *.css 확장자 파일로 저장하고 .. 2022. 8. 14.

[CSS] 미디어 쿼리 활용하기 미디어 쿼리(Media Query)란? 사용하는 기기의 해상도에 따라 CSS를 분기시키는 기법이며, PC 이외에도 스마트폰이나 태블릿 PC 등 다양한 기기에서 웹 서핑을 하는 사람들을 위한 반응형 프로젝트에 반드시 필요하다. 01. 최소 가로폭이 1000px, 즉 1000px보다 넓은 해상도일 때 style_pc.css를 연결한다는 뜻이다. 태블릿이나 모바일 기기마다 가로폭은 다르며 Chrome의 개발자 도구의 Toggle device toolbar를 누르면 기기마다의 해상도가 등록되어 있고 기기 모델 추가도 가능하다. 모바일 기기별 해상도 모바일 기기 가로 세로 iPhone X 375 812 iPhone 6, 7, 8 375 667 iPhone 6, 7, 8 plus 414 736 iPhone 5 32.. 2022. 8. 14.

[사이트 만들기] 카드 유형 섹션 만들기 심화편 사이트 만들기 : 카드 유형 03 이번 포스팅에서는 Figma에서 만든 카드 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. 최대한 웹 표준을 준수하기 위해 시맨틱 태그를 사용하고 이미지 출력 시 figure 태그로 감싸며, img 태그에서 alt(설명)칸에 부연 설명을 넣는 등의 작업을 잊지 말도록 합시다! Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 이번에 만들 웹 사이트의 유형은 카드 유형 섹션 심화편이며 지난 번 카드 유형이 진라면 순한맛이라면 이번 편은 불닭, 마라맛이니 각오하자🥵. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하고 img 태그에서의 alt 기능도 적극 활용할 것. 자세.. 2022. 8. 10.

[CSS] 비트맵 방식과 벡터 방식 알아보기 비트맵(Bitmap) 방식 서로 다른 점(픽셀)들의 조합으로 그려지는 이미지 표현 방식을 비트맵이라고 하며, 사진 이미지에서 주로 사용된다. 크기를 늘리거나 줄이면 원본 이미지에 손상이 가는 것이 단점이자 큰 특징이며 이에 대해 우리는 '계단현상'이나 '이미지가 깨졌다'라고 흔히 표현한다. 치명적 단점 「계단현상」에도 많이 사용되는 이유는? 이미지를 표시하는 방식 중 가장 컴퓨터에 부담을 덜 주는 구조를 갖기 때문에 웹에서 이미지를 표시할 때에는 주로 비트맵 방식 이미지를 사용한다. 우리가 흔히 사용하는 .jpg, .jpeg, .png, .gif 등이 비트맵 방식이다. 대표적 파일 확장자와 특징 정리 확장자 특징 BMP 픽셀 데이터를 압축하지 않고 그대로 저장. 구조가 간단한 반면 파일 용량이 커진다는 .. 2022. 8. 9.

[사이트 만들기] 카드(8개) 유형 섹션 만들기 사이트 만들기 : 카드 유형 02 이번 포스팅에서는 Figma에서 만든 카드 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. 최대한 웹 표준을 준수하기 위해 시맨틱 태그를 사용하고 이미지 출력 시 figure 태그로 감싸며, img 태그에서 alt(설명)칸에 부연 설명을 넣는 등의 작업을 잊지 말도록 합시다! Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 이번에 만들 웹 사이트의 유형은 카드(8개) 유형 섹션이다. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하고 img 태그에서의 alt 기능도 적극 활용할 것. 자세한 설명은 아래 예시 코드의 주석처리 내용을 참조할 것. 포트폴리오 만들기 취업용.. 2022. 8. 9.

[사이트 만들기] 카드 유형 섹션 만들기 사이트 만들기 : 카드 유형 이번 포스팅에서는 Figma에서 만든 카드 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. 최대한 웹 표준을 준수하기 위해 시맨틱 태그를 사용하고 이미지 출력 시 figure 태그로 감싸며, img 태그에서 alt(설명)칸에 부연 설명을 넣는 등의 작업을 잊지 말도록 합시다! Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 이번에 만들 웹 사이트의 유형은 카드 유형 섹션이다. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하고 img 태그에서의 alt 기능도 적극 활용할 것. 자세한 설명은 아래 예시 코드의 주석처리 내용을 참조할 것. 별빛 제빵교실 개강소식🍞 별빛 제빵교.. 2022. 8. 8.

[Layout] 레이아웃 05 레이아웃 05 전체 영역이 들어간 구조이며 실제 사이트에서 이런 구조를 많이 사용하고 컨테이너를 만들어 가운데 영역을 설정하고 그런 다음 float, flex , grid 방식 중 하나를 선택해 구역을 분류한다. Float을 이용한 레이아웃 레이아웃의 틀을 잡을 때 태그가 사용되며 해당 태그는 Block 형식이므로 가로로 나란히 정렬이 불가능하다. 이때 나란히 정렬해주고자 하는 요소의 CSS 속성에 float: left;를 적어주면 나란히 정렬이 가능하다. 단, 이 속성을 쓰게 될 경우, 속성을 썼던 아래의 footer의 height값이 0이 되어 보이지 않게 되는 버그가 발생하는데 이럴 때에는 보이지 않는 해당 요소에 clear: both;를 적어놓으면 해결된다. clear: both; 외에도 over.. 2022. 7. 29.

[Layout] 레이아웃 04 레이아웃 04 전체 영역이 들어간 구조이며 실제 사이트에서 이런 구조를 많이 사용하고 컨테이너를 만들어 가운데 영역을 설정한다. Container(컨테이너)를 이용한 레이아웃 전체 영역이 들어간 구조이며 실제 사이트에서 이런 구조를 많이 사용하고 컨테이너를 만들어 가운데 영역을 설정한다. * { margin: 0; padding: 0; } #header { height: 100px; background-color: #E0F2F1; } #nav { height: 300px; background-color: #80CBC4; } #section { height: 500px; background-color: #26A69A; } #footer { height: 100px; background-color: #008.. 2022. 7. 29.

[Layout] 레이아웃 03 레이아웃 03 전체 영역이 들어간 구조이며 실제 사이트에서 이런 구조를 많이 사용하고 컨테이너를 만들어 가운데 영역을 설정한다. Float을 이용한 레이아웃 레이아웃의 틀을 잡을 때 태그가 사용되며 해당 태그는 Block 형식이므로 가로로 나란히 정렬이 불가능하다. 이때 나란히 정렬해주고자 하는 요소의 CSS 속성에 float: left;를 적어주면 나란히 정렬이 가능하다. 단, 이 속성을 쓰게 될 경우, 속성을 썼던 아래의 요소가 보이지 않게 되는 버그가 발생하는데 이럴 때에는 보이지 않는 해당 요소에 clear: both;를 적어놓으면 해결된다. 또한 clear: both; 대신 맨 아래의 clearfix 부분을 적어놓는 방법도 있다. * { margin: 0; padding: 0; } body { .. 2022. 7. 29.

[Layout] 레이아웃 02 레이아웃 02 전체 영역이 들어간 구조이며 실제 사이트에서 이런 구조를 많이 사용하고 컨테이너를 만들어 가운데 영역을 설정한다. Float을 이용한 레이아웃 레이아웃의 틀을 잡을 때 태그가 사용되며 해당 태그는 Block 형식이므로 가로로 나란히 정렬이 불가능하다. 이때 나란히 정렬해주고자 하는 요소의 CSS 속성에 float: left;를 적어주면 나란히 정렬이 가능하다. 단, 이 속성을 쓰게 될 경우, 속성을 썼던 아래의 요소가 보이지 않게 되는 버그가 발생하는데 이럴 때에는 보이지 않는 해당 요소에 clear: both;를 적어놓으면 해결된다. * { margin: 0; padding: 0; } body { background-color: #E8F5E9; } #wrap { width: 1200px;.. 2022. 7. 29.

[Layout] 레이아웃 01 레이아웃 01 전체 영역이 들어간 구조이며 실제 사이트에서 이런 구조를 많이 사용하고 컨테이너를 만들어 가운데 영역을 설정한다. Float을 이용한 레이아웃 레이아웃의 틀을 잡을 때 태그가 사용되며 해당 태그는 Block 형식이므로 가로로 나란히 정렬이 불가능하다. 이때 나란히 정렬해주고자 하는 요소의 CSS 속성에 float: left;를 적어주면 나란히 정렬이 가능하다. 단, 이 속성을 쓰게 될 경우, 속성을 썼던 아래의 footer의 height값이 0이 되어 보이지 않게 되는 버그가 발생하는데 이럴 때에는 보이지 않는 해당 요소에 clear: both;를 적어놓으면 해결된다. * { margin: 0; padding: 0; } body { background-color: #FFF3E0; } #wr.. 2022. 7. 29.

[CSS] 레이아웃 배치 유형 3가지 알아보기 레이아웃(Layout) 웹을 구성하는 요소들을 보다 알아보기 쉽게 효과적으로 배치시켜주는 작업입니다. 레이아웃의 3가지 유형 레이아웃에는 Float, Flex, Grid라는 총 3가지 유형(방법)이 있습니다. 사용 방법은 아래와 같으며 1번의 경우 정렬하고자 하는 요소에, 2·3번의 경우는 부모 태그에 적습니다. 1. float: left; 2. display: flex; 3. display: grid; 01. Float Float란 '띄우다'라는 의미를 지니며 레이아웃의 틀을 잡을 때 사용됩니다. 레이아웃의 틀을 잡을 때에는 태그가 사용됩니다. 하지만 해당 태그는 block 형식이기 때문에 요소들이 가로로 나란히 정렬될 수 없습니다. float: left; 이때, 나란히 정렬해주고자 하는 요소의 CSS.. 2022. 7. 25.

이전 1 2 다음

Reference Book

JavaScript

JavaScript

HTML

HTML

CSS

CSS

광고 준비중입니다.

티스토리툴바