코딩하는 거북이

웹디자인 기능사 실기를 대비해 기본적인 레이아웃 짜기 여러가지 유형의 레이아웃을 기본적인 틀 구성만 한번 해보도록 하겠습니다. A 유형 HTML + CSS (1번) D유형 HTML + CSS (1번) E유형 HTML + CSS (1번)

레이아웃 실전 종합 이번에는 만들어놓은 레이아웃들을 한 곳에 합쳐 웹페이지를 만들어보도록 하겠습니다. (슬라이드 제외) 슬라이드 유형은 다음에 따로 만들도록 하겠습니다. 만들어진 페이지 보러가기 https://dlgnsrb227.github.io/web2023/site/site1/index.html HTML 작성하기 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가기 카드 영역 바로가기 배너 영역 바로가기 텍스트 영역 바로가기 푸터 영역 바로가기 사이트 로고 Han-River. 전경 소개 역사 위치 주변 공원 로그인 EVENT 한강 무료 아메리카노 여의도 한강공원 여의나루역 5번출구로 나와 전방 300m 부근에서 무료 아메리카노 시식 이벤트가 진행됩니다. 자세히 ..

레이아웃 실전 _ 배너 유형 이번에는 웹페이지 안에 들어가는 배너유형을 작업해 보도록 하겠습니다. 배너유형 디자인하기 HTML 작성하기 한강을 제대로 즐기는 방법 한강에서 보내는 시간을 더 아름다운 추억으로 남길 수 있는 방법을 알려드립니다. 아래 블로그를 참고하여 한강에서의 추억을 더욱 값지게 만들어보세요. https://hoong-co.tistory.com/ HTML 정리해보기 이번 배너 유형은 다른 section들과 달리 하나의 article만 만들었습니다. 하나의 article에 h3, p, a 태그를 사용하였습니다. CSS 작성하기 * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } h1,h2,h3,h4,h5,h6 { f..

레이아웃 실전 _ 푸터유형 이번에는 웹페이지의 가장 하단에 부분에 들어가는 푸터 유형에 대해 작업해 보겠습니다. 푸터유형 디자인하기 구상한 디자인 기반으로 코딩 HTML 작성하기 한강 주변 식당 소개하기 방문 예약하기 사진 보기 식당 구경하기 식당 등록하기 커뮤니티 한강 주변 카페 소개하기 방문 예약하기 사진 보기 카페 구경하기 카페 등록하기 커뮤니티 한강공원 화장실 위치보기 안내보기 시설보기 가까운 시설 안내 한강 배달존 위치보기 배달점 검색 주소받기 가까운 자리 보기 한강 대여소 대여물품 대여하기 사진 보기 반납존 위치 보기 가격문의 신고하기 불법행위 소란행위 민원안내 안내소 위치 2023 한강공원 나들이 프로젝트 HanRiver Picnic All Right Reserved HTML 정리해보기 이번..

레이아웃 실전 _ 슬라이드 유형 이번에는 웹페이지에 들어갈 텍스트 유형의 레이아웃을 만들어 보겠습니다. 텍스트유형 디자인하기 구상한 디자인 기반으로 코딩 HTML 작성하기 HISTORY 한강의 역사 한국의 한강 한강은 대한민국에서 가장 중요한 강 중 하나로, 서울을 비롯한 수도권 지역의 생명선이기도 합니다. 한강의 역사는 매우 오래되었으며, 이 지역을 거주하던 선사시대부터 현재까지 ... 더보기 한강의 과거 선사시대에는 한강 주변 지역에 선사 문화가 발전하였으며, 이후 백제와 고구려가 이 지역을 통제하였습니다. 고려시대에는 한강이 경제와 군사의 중요성을 가졌으며, 성종 때에는 ... 더보기 기준이 되는 한강 조선시대에는 한강 주변 지역이 국가 발전의 중심지가 되었으며, 여러 대목으로 이루어진 다목적 수로..

레이아웃 실전 _ 슬라이드 유형 이번에는 웹페이지에 들어갈 슬라이드 유형의 레이아웃을 만들어 보겠습니다. 슬라이드유형 디자인하기 구상한 디자인 기반으로 코딩 HTML 작성하기 메인 슬라이드 영역 EVENT 한강 무료 아메리카노 여의도 한강공원 여의나루역 5번출구로 나와 전방 300m 부근에서 무료 아메리카노 시식 이벤트가 진행됩니다. 자세히 보기 참여 하기 이전 이미지 다음 이미지 첫 번째 이미지 두 번째 이미지 세 번째 이미지 플레이 정지 HTML 정리해보기 슬라이드 유형의 경우 전체 배경에 이미지가 들어가기 때문에 별도의 container 안에 작업하지 않았습니다. slider__inner 클래스의 박스에 크게 세 부분으로 나누어 작업하였습니다. 이미지와 주제, 설명 등의 글이 들어가는 한 부분, 슬..

레이아웃 실전 _ 이미지/텍스트 유형 이번에는 텍스트와 이미지가 같이 있는 유형을 한번 만들어보도록 하겠습니다. 이미지/텍스트 유형 디자인하기 만들고자 하는 사이트의 디자인을 구상해봅니다. 구상한 디자인 기반으로 코딩 HTML 작성하기 park 한강을 끼고있는 공원 한강 주변에는 다양한 공원이 있습니다. 여기에 몇 가지 추천 공원을 알려드리겠습니다. 반포 한강공원 여의도 한강공원 이촌 한강공원 뚝섬 한강공원 난지 한강공원 잠원 한강공원 망원 한강공원 잠실 한강공원 광나루 한강공원 강서 한강공원 양화 한강공원 HTML 정리해보기 하나의 컨테이너에 이미지들을 감쌀 수 있는 하나의 박스를 만들고 그 안을 세 개의 로 나누어 주었습니다. 두 번째, 세 번째 은 준비한 이미지를 넣어주고, 첫 번째 에는 태그를 사..

레이아웃 실전 _ 이미지 유형 이미지 유형 레이아웃 디자인하기 우선 만들고자 하는 웹 사이트의 디자인을 구상해 봅니다. 구상한 디자인 기반으로 코딩하기 구상해놓은 레이아웃 디자인을 보며 HTML문서에 작성합니다. HTML 문서 작성 한강의 전경 한강은 평소에 봐도 저녁에 봐도 이쁩니다. 낮의 한강 맑은 날 밝을 때 한강을 가면 산뜻하고 웅장한 느낌을 받을 수 있습니다. 자세히보기 저녁의 한강 노을이 지는 저녁에 한강을 가면 맥주를 안 마시고는 버틸 수 없는 전경이 펼쳐집니다. 자세히보기 HTML 정리해보기 하나의 section에 제목과 이미지로 크게 두 부분으로 나누어 구조를 짜봤습니다. 이미지의 부분에는 다시 두 부분으로 나누어 각각의 이미지를 넣어주었습니다. CSS 정리해보기 * { margin: 0..

레이아웃 실전 _ 카드유형 카드유형 레이아웃 디자인하기 우선 만들고자 하는 웹 사이트의 레이아웃을 구상해봅니다. 구상한 디자인 기반으로 코딩하기 구상해놓은 레이아웃 디자인을 보며 HTML문서에 작성합니다. 한강을 알아보자 한강은 낮에도 밤에도 아름다운 광경이 펼쳐지지만, 특히 맑은날 저녁 노을이 지는 무렵의 한강의 모습은 하루의 고단함을 저절로 잊게 만들어주곤 합니다. 한강 주변 관광지 한강 주변에는 대표적으로 한강공원이 위치하며, 주요 관광지로는 남산타워, 경복궁, 국립중앙박물관, 63빌딩, 덕수궁 등이 있습니다. 또한, 한강을 따라 자전거도로와 산책로가 조성되어 ... 자세히 보기 한강의 중요성 한강은 또한 한반도의 역사와 문화를 반영하는 중요한 상징 중 하나입니다. 특히, 1950년대 한국전쟁에서 ..

반응형 레이아웃 웹사이트의 레잉아웃을 만들 때, 방문자가 사용하는 모니터의 화면 해상도에 따라 레이아웃의 크기를 변경하게끔 하는 반응형 레이아웃에 대해서 알아보겠습니다. 레이아웃 틀 짜기 기본적으로 레이아웃의 틀을 flex 유형으로 만든 방법입니다. 반응형 추가하기 @media(max-width:1280px){ .container{ width: 96%; display: flex; flex-wrap: wrap; flex-direction: column; } .container1{ width: 33.3333%; height: 780px; } .container2{ width: 66.6666%; height: 390px; } .box{ width: 66.6666%; height: 390px; } } @medi..

레이아웃 grid 유형으로 만들기 grid 방식으로 만들기 grid layout은 비교적 직관적이어서 다른 레이아웃보다 사전지식이 덜 필요합니다. display : grid를 적용하여 만들고자 하는 레이아웃을 칸칸이 쪼개어 크기를 설정해주어 만들어주면 됩니다. 레이아웃 코드 해석하기 위의 레이아웃을 예로 들면 칸칸을 쪼개어 보았을 때, 세로로 4줄 가로로 2줄이 나오게 됩니다. grid-template-area : header header // nav nav // aside section // footer footer (// 줄 바꿈)의 형식으로 나누어준 칸의 영역에 들어갈 요소를 선택해줍니다. grid-template-columns : 400px 800px 두칸으로 설정해주고, grid-template..

레이아웃 flex 유형으로 만들기 flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것을 말합니다. 기본 틀 구성하기 기본 틀을 만들어 준 코드입니다. 기본 틀의 결과를 보면 위 처럼 나오는데 aside와 section을 나란히 정렬해주기 위해서, aside와 section이 포함되어 있는 전체를 감싸고 있는 wrap에게 display:flex; / flex-wrap:wrap;의 속성을 부여합니다. #wrap { width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; } 다음과 같이 속성을 부여하게 되면 맨 위의 완성본과 같은 모양이 되는 것을 확인할 ..

문자 관련 스타일 CSS에서 문자를 스타일링하는 다양한 방법이 있는데, 다음은 CSS에서 일반적으로 사용하는 문자 관련 스타일입니다. font-family 문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-size 문자의 글자 크기를 지정하는 속성입니다. 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. 단위는 ? px 해상도에 따라 상대적으로 달라지는 기본 단위 % 부모 요소의 글자 크기를 100%로 계산한 단위 em 부모 요소의 글자 크기를 100%로 계산한 100분의 1단위 rem 최상위 요소의 글자 크기를 100%로 계산한 100분의 1단위 vw,..

Css에 있는 Id선택자, Class선택자를 Type선택자와 함께 다른 선택자들에는 어떤 것들이 있는지 알아보겠습니다 ! CSS 선택자 전체 선택자 모든 HTML 요소를 선택합니다. (*) 요소 선택자 HTML 요소의 태그 이름을 기반으로 선택합니다. (tagname) 클래스 선택자 HTML 요소의 class 속성 값을 기반으로 선택합니다. (.classname) ID 선택자 HTML 요소의 id 속성 값을 기반으로 선택합니다. (#idname) 속성 선택자 HTML 요소의 속성 값을 기반으로 선택합니다. ([attribute] 또는 [attribute=value]) 자식 선택자 HTML 요소의 직계 자식 요소를 선택합니다. (parent > child) 자손 선택자 HTML 요소의 모든 하위 요소를 선..

Css 레이아웃을 만들 때, 정렬을 위한 방법 중 float 유형을 알아보겠습니다. 위 사진을 표본으로 레이아웃을 구성해 보겠습니다. 기본 틀 Float 사용 float은 요소를 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 속성입니다. 세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려 할 때 매우 유용합니다. 결과를 보시면 좌우로 나열된 것을 볼 수 있지만, footer가 사라진 것을 확인하실 수 있습니다. float을 사용한 다음 컨텐츠가 주변을 흐르게 되어 깨짐 현상이 나타나는 것인데 clear 속성을 이용해 float을 해제시켜주는 과정이 필요합니다. footer에 clear 속성을 추가해주니 깨지지 않고 원래 모양을 유지하며 결과가 출력되는 것을 보실 수 있습니다. clear..

CSS의 선택자란 ? CSS에서 선택자란 UI의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다. 사진을 보면 h1에 대한 속성값을 적어놓았는데, 여기서 표현할 대상이 되는 'h1'이 선택자가 되는 것입니다. 'h1'은 선택자, 'color'는 속성, 'red'는 속성값으로 봅니다. 선택자의 종류로는 type 선택자, id 선택자, class 선택자가 있습니다. type 선택자 html 문서의 태그 이름을 선택자로 사용할 수 있습니다. 사진을 보면 태그 자체를 선택자로 잡아 속성을 부여한 것을 확인 가능합니다. id 선택자 id로 HTML 요소에 이름을 붙이게 되면 따로 선택하여 속성을 부여할 수 있습니다. 각각의 요소에 각기 다른 유일한 이름을 부여해야 하며, 다른 요소에 같은 id명을..

CSS의 기본문법 CSS(Cascading Style Sheets)를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 실제로는 외부 스타일시트를 많이 사용하는 편이지만, 간단한 스타일은 내부 스타일시트만으로 사용할 수도 있습니다. 인라인 스타일시트의 경우 거의 사용하진 않지만, 가장 우선순위가 높아서 꼭 필요한 경우 편리하게 사용 가능합니다. 내부 스타일시트 CSS를 HTML 문서안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이때 스타일은 .css 확장자를 가진 별도의 파일로 저장하고, HTML에서는 태그를 이용하여 선언합니다. 여러..