jongyung

설명: 위와 같이 website 를 만들기 위한 layout 연습을 했습니다. style sheet 를 어떻게 썼는지 설명하겠습니다. style sheet * { margin: 0; padding: 0; } a { text-decoration: none; color: black; } li { list-style: none; } #wrap { width: 1200px; height: 700px; margin: 0 auto; text-align: center; flex-wrap: wrap; } #header { background-color: #f6d6d6; display: flex; } #header h1 { width: 30%; height: 100px; border-right: 1px dashed #0..

설명: 이미 만들어 놓은 사이트 부분들을 종합해서 하나의 사이트로 만들어 보았습니다. html 과 css 를 나눠서 만들어 봤습니다. html 은 body 부분을 설명하고, css 는 이전에 작업했던 내용과 같기 때문에 따로 보여드리지는 않겠습니다. css 는 반응형을 고려한 media query 부분을 더했을 뿐, 이전에 style sheet 에 입력한 내용과 같지만, 공통적으로 들어간 내용들 예를 들어서, 글씨체나 여백 등의 부분들은 모아서 따로 정리했습니다. css 는 이 부분들을 common, font, 그리고 reset 으로 나눠서 설명하겠습니다. html 의 body 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가기 카드 영역 바로가기 베너 영역 바로..

figma로 만든 다음의 푸터 유형을 코딩으로 만들어 보겠습니다. 링크: 푸터 영역 01 (daanbi1345.github.io) 간략한 설명: 웹사이트의 하단 부분이라서 간단합니다. 6가지의 카테고리로 나눴습니다. 이제 body와 style을 나눠서 세부적인 설명을 하겠습니다. body 푸터 여행 가방 꾸리기 체계적으로 물건 담는 법 최소한의 물건 담기 가벼운 물건 위주로 챙기기 체크 리스트 작성하기 휴대용 물건 챙기기 휴대용품 챙기기 필수로 챙겨야 하는 물건 현지에서 구하기 힘든 물건 위급한 상황 대비하기 여행 계획 세우기 가고 싶은 여행지 꼽기 관광 장소 알아보기 숙소 알아보기 숙소 근처 식당 알아보기 여행지 탐방하기 계획에서 조금 벗어나보기 현지인에게 추천 받기 숙소 근처에서 산책하기 시장 구경하..

figma로 만든 다음의 텍스 유형을 코딩으로 만들어 보겠습니다. 링크: 텍스트 유형 (daanbi1345.github.io) 간략한 설명: 마우스 오버 효과를 넣어서 만들어 봤습니다. 롤오버 또는 Hover란 이미지, 텍스트, 버튼 등에 마우스 포인터가 올라갔을 때 발동되는 일종의 전환효과를 말합니다. 이 기능은 디자인 모드 곳곳에서 확인할 수 있습니다. 각 카테고리 창 위에 마우스를 올리면 보기와 같이 회색으로 창이 변하고, 더보기 버튼에 마우스를 올리면 + 버튼이 돌아가는 효과입니다. 그 외에는 아이콘을 만들고 이전에 했던 것처럼 텍스트를 넣고 위치를 설정했습니다. 이제 body와 style을 나눠서 세부적인 설명을 하겠습니다. body Notice 해외 여행 여행 가방 꾸리기 여행의 가장 기본은 ..

figma로 만든 다음의 슬라이드 유형을 코딩으로 만들어 보겠습니다. 간략한 설명: 사진이 전체 배경이고, 사진 위에 글자와 버튼을 올렸습니다. 글자와 버튼들이 잘 보일 수 있도록 사진을 조금 어둡게 했습니다. EVENT 버튼과 자세히 보기, 상담 신청 버튼들과 페이지를 넘기는 화살표, 그리고 페이지가 넘어가는 것을 알 수 있도록 밑에 표시를 해줬습니다. 이제 body와 style을 나눠서 세부적인 설명을 하겠습니다. body 메인 슬라이드 영역 event 이탈리아로 떠나는 여행 이탈리아로 떠나는 여행이 궁금하시지 않으세요? 지금부터 이탈리아로 떠나는 여행이 얼마나 즐거울지 소개합니다. 자세히 보기 상담 신청 이전 이미지 다음 이미지 첫번째 이미지 두번째 이미지 세번째 이미지 재생 정지 각 부분들을 나눠..

이번에는 figma로 만든 다음의 이미지/텍스트 유형을 코딩으로 만들어 보겠습니다. 간략한 설명: 보이는 것처럼 이번에는 사이트를 크게 세 부분으로 나눌 수 있습니다. 글이 써있는 부분(article class="desc"), 음식 사진(article class="food"), 기념품 사진(article class="souvenir")으로 나누어서 만들었습니다. 이제 body와 style을 나눠서 세부적인 설명을 하겠습니다. body NOTICE 음식점과 기념품 가게 고르는 Tip 맛있는 음식을 맛보고 싶은 마음은 누구나 있습니다. 그리고 기념품을 사서 보관하거나 선물하는 일도 많죠. 오소 부코 프로슈토 리볼리타 살팀보카 쿠샤리 에이시 하맘 토르시 마비스 치약 낙타 인형 시샤 도구 지난 번에 만들었던 사..

지난 번에 한 웹사이트 카드 유형 만들기에 이어서 이번에는 이미지 유형을 만들어 봤습니다. 마찬가지로, figma로 미리 사이트의 이미지 예제를 만들어 봤습니다. 설명은 body부분과 head에 입력한 style부분으로 나눠서 하겠습니다. body body부분의 코드입니다. 해외 여행 가고 싶은 여행지를 소개합니다. 이탈리아 해외 여행이 생각나요? 이탈리아를 소개합니다. 자세히 보기 이집트 해외여행 가고 싶지 않나요? 이집트를 소개합니다. 자세히 보기 큰 틀부터 그 안에 들어있는 요소들은 큰 제목 문장 이미지 넣을 공간 이미지 위에 넣을 큰 제목 이미지 위에 넣을 문장 자세히 보기 버튼 이미지 넣을 공간 이미지 위에 넣을 큰 제목 이미지 위에 넣을 문장 자세히 보기 버튼 이런 모양입니다. 가장 큰 틀은 ..

코딩으로 웹사이트를 만드는 설명을 해보겠습니다. figma로 웹사이트의 이미지 예제를 만들고 시작했습니다. 해당 이미지를 실질적인 사이트로 만들어 나가는 과정입니다. 우선, 코드를 보여드리고 설명하겠습니다. 해외 여행 여행지에서 볼 거리들과 머무를 숙소 등을 소개합니다. 여행지에서 가장 중요한 것들을 빼먹을 수는 없죠. 그 나라가 자랑하는 관광지를 소개합니다. 광장 쇼핑과 거리 구경을 할 수 있는 쇼핑몰의 광장을 소개합니다. 장인들의 전통이 녹아 있는 가게들부터 명품을 살 수 있는 거리까지 전부 놓칠 순 없죠. 전통과 문화를 즐겨보세요. 자세히 보기 거리 축제 거리에서 시간마다 마차를 몰고 소공연을 펼치고 있습니다. 작은 축제이지만 그곳이 아니면 볼 수 없는 기회를 놓치지 마세요. 어디에서 사진을 찍든 ..

02. grid layout grid layout은 비교적 직관적이어서 다른 레이아웃보다 사전지식이 덜 필요합니다. 일단 원하는 레이이웃을 먼저 스케치라고 그것을 위해 필요한 속성을 추가하는 방식으로 설명해보겠습니다. 네 개짜리 박스를 마크업합니다. header sidemenu content footer 이 박스에 grid layout을 사용한다고 선언합니다. .wrap ( display: grid; ) 가로로 2칸 세로로 3칸 이므로 grid-template-columns에 두 개의 가로 크기를 차례로 지정하고 grid-template-rows 에는 위부터 아래까지 세 개의 세로 크기를 지정합니다. .wrap ( display: grid; grid-template-columns: 30% 70%; gri..

01. flex layout 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, fl..

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

선택자란 CSS로 UI의 표현할 대상이 되는 부분입니다. 지난 번에 게시한 ID 와 CLASS 의 차이점을 알아보는 게시글에서 밝혔 듯이, CSS로 속성을 부여하는 형식은 위와 같습니다. ID와 CLASS외에도 다른 선택자들이 있기 때문에 이번 게시글에서는 ID와 CLASS를 포함한 14가의 선택자에 대해서 알아보려고 합니다. 1. type 선택자 html 문서의 태그 이름을 선택자로 사용할 수 있습니다. p태그 안의 글자들을 파란색으로 표시하는 속성을 부여해주는 예제로 설명하겠습니다. ~ ~ 머리가 좋아지는 음식 결과로는 머리가 좋아지는 음식 이 나옵니다. 2. id 선택자 html 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다.유일한 이름을 붙여야 하고, c..

block 요소는 원래 세로로만 나열되지만, float을 이용해서 가로로 배치할 수 있습니다. float은 레이아웃을 완성하기 위해서 필수적입니다. float을 지정하는 법과 해제하는 법을 알아보려고 합니다. float float은 요소를 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 속성입니다. 세로로만 나열되던 블록들을 가로로 배치할 때 씁니다. float 한 박스에 가로 사이즈를 지정해 주면 크로스브라우징 됩니다. heading 요소나 인라인 요소들은 가로 사이즈 없이 float을 해도 레이아웃이 흐트러지지 않습니다. float의 형식은 "float: left;" 이런 모습입니다. 여기서 left는 요소를 왼쪽에 배치하고 나머지 콘텐츠는 그 주변에 흐르도록 한다는 의미이고, right를..

선택자(selector)란? 선택자란 CSS로 UI의 어느 부분을 디자인 할 부분, 즉 표현할 대상입니다. CSS로 속성을 부여하는 형식은 다음과 같습니다. 요소를 선택하는 방법, 즉 선택자의 종류로는 type 선택자, id 선택자, class 선택자 등 여러 가지가 있습니다. 그 중에서 ID 선택자와 CLASS 선택자의 차이점에 대해서 알아보려고 합니다. ID 선택자 HTML 문서의 요소 중 같은 요소도 각기 다른 이름을 지정해서 따로 속성을 부여할 수가 있습니다. HTML 요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야 하며, 다른 요소에 같은 id 명을 또 주면 안됩니다. 아이디명 또한 태그와 겹치면 안됩니다. CSS에서는 id 선택자 앞에 #를 붙여야 합니다. id명이나 class명은 숫..

See the Pen Untitled by choeunkyoung (@choeunkyoung) on CodePen. codepen 사이트를 통해서 움직이는 애니메이션을 만들 수 있습니다.

CSS 기본 문법 CSS(Cascading Style Sheet)를 정의하는 방법으로는, 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 내부 스타일시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이 때 스타일은 .css 확장자를 가진 별도의 파일로 저장하고, HTML에서는 태그를 이용해서 선언합니다. 내부 스타일시트는 그 스타일이 기술된 페이지에만 적용되지만, 외부 스타일시트는 그 스타일을 선언한 모든 HTML 페이지에 적용됩니다. @import CSS 안으로 다른 CSS 파일을 불러들일 경우에 사용합니다. 맨 윗 줄에 기술..