728x90 728x90 경일/HTML & CSS10 하나투어 게시판 클론코딩/ table 완전정복 오늘 수업에서 배운 내용을 토대로 하나투어의 게시판이 있는 페이지를 클론 코딩 해보았다. https://kong-dev.tistory.com/99 페이지 이동 원리/form 태그 사용 0. 목차 1.복습 2. 페이지 이동원리 3. form 태그 4. submit 1.복습 table, tr, td 를 이용하면 표를 만들 수 있는데, 주로 게시판을 만들 때 사용된다. See the Pen Untitled by donghunlee (@dev_kong_dh) on Co.. kong-dev.tistory.com 기존에 작업 하나투어 메인페이지를 클론코딩 하고 있었기 때문에, 위의 헤더는 고대로 갖다 붙였다. 이 페이지를 따라 만들면서 새롭게 알게 된 것들을 정리 해보려고 한다. 1. table, thead, tb.. 2021. 12. 30. 페이지 이동 원리/form 태그 사용 0. 목차 1.복습 2. 페이지 이동원리 3. form 태그 4. submit 1.복습 table, tr, td 를 이용하면 표를 만들 수 있는데, 주로 게시판을 만들 때 사용된다. See the Pen Untitled by donghunlee (@dev_kong_dh) on CodePen. 2. 페이지 이동 원리 새로운 주소( href에 할당 해놓은 값)로 이동한다. 주소창의 주소는 서버에 저장되어 있는 경로를 나타낸다. 눈으로 보기에는 페이지를 이동해도 변하지 않는 부분들이 있어서, 변하는 부분만 변경 되는 것처럼 보일 수 있지만, 우리 눈에 고정된것 처럼 보이는 부분들은 이동전 html 과 이동 후 html에 공통적으로 작성된 부분이다. 로고 번호 제목 작성자 작성일 조회수 1 안녕하세요 web77.. 2021. 12. 29. 레이어팝업/모달팝업 이용해서 회원가입 창 만들기 0. 목차 1. box-shadow 2. input 속성 3. 레이어팝업/ 모달팝업 이용해 회원가입 창 만들기. 1. box-shadow box-shadow 속성을 이용하면 div 영역에 그림자를 만들 수 있다. 작동원리는 선택된 영역과 같은 사이즈의 영역을 생성하고, 생성된 영역은 선택된 영역의 z축 아래에 위치하게 된다. 그리고 입력된 값을 이용해 X축 이동, Y축 이동, 번짐정도, 색상을 지정해줄수 있다. See the Pen Untitled by donghunlee (@dev_kong_dh) on CodePen. 코드를 보면 box-shadow에 총 4가지의 값이 입력된 것을 확인할 수 있다. 첫번째 값은 X축 이동, 양수는 오른쪽으로 음수는 왼쪽으로 이동한다. 두번째 값은 Y축 이동, 양수는 아.. 2021. 12. 28. 햄버거 메뉴 만들기 0. 목차 1. 복습 2. 선택자 3. display:none 4. cursor:pointer 5. transform 6.transition 7. 햄버거 메뉴 만들기 1. 복습 input의 타입을 checkbox로 지정해주고 id를 지정해준 뒤에 label 엘리먼트의 for 속성에 input의 id를 지정 해주면, label의 텍스트컨텐트를 클릭해도 체크박스에 체크가 되는 것을 확인할 수 있다. See the Pen Untitled by donghunlee (@dev_kong_dh) on CodePen. 2. 선택자 tag 선택자 id 선택자 class 선택자 이외에도 다양한 선택자들이 있다. 2-1. 속성선택자 '[]' 를 이용해 엘리먼트에 부여된 속성을 통해서도 CSS선택자를 지정할 수 있다. See.. 2021. 12. 27. html, css 클론코딩 0.목차 복습 경일 사이트 main content 클론코딩 1.복습 어제 한거 다시 만들어 보면서 hover를 배웠다. 1-1. hover 영어 단어 뜻을 찾아보니 이렇다. 커서가 해당영역의 공중을 맴돌 때 지정되는 스타일을 정할 수 있는 선택자로 생각하면 될듯하다. #visual > #visual_menu > ul > li > a:hover { background-color: black; opacity: 1; } 이렇게 스타일을 지정해주면 마우스가 올라가 있을 때 저렇게 스타일이 변한다. 2. 경일사이트 main content 클론코딩 돌아온 클론코딩 이부분 중에서 저 박스 6개 부분만 만들 거다. 2-1. 마크업 Game Architecture 게임기획 게임기획자를 위한 정석 Class 바로가기 6개.. 2021. 12. 23. block, inline, inline-block차이점/ 자식 element 사용/ html, css 클론코딩 0. 목차 block, inline, inline-block 자식 element 만들기 경일아카데미 사이트 상단부 클론 1. block, inline, inline-block display 프로퍼티 에서 사용 할 수 있는 속성중 block 과 inline, inline-block 에 대해 알아보자. 1-1. block block은 한 영역을 차지하는 박스형태를 가진다. 그렇기 때문에 기본적으로 width는 100%로 설정된다. width와 height 를 지정할 수 있으며, margin과 padding 도 지정할 수 있다. width를 지정해도 남은 영역을 모두 차지 한다. 1-2. inline inline은 기본적으로 컨텐츠가 존재하는 영역만 차지한다. 그러므로 width와 height를 지정할 수 없.. 2021. 12. 22. HTML 기초 / CSS기초 0.목차 1.HTML 기초 1-1. ! 1-2. id와 class 1-3. table element 2.CSS 기초 2-1. CSS 사용하는 이유 2-2. CSS특징 2-3. CSS 적용 방법 2-3-1. 인라인방식 2-3-2. head영역에 style추가 2-3-3. link를 이용해 외부파일 연결 2-4. CSS선택자 2-5. CSS 주요 속성 2-5-1. backgruoud-color 2-5-2. width 와 height 2-5-3. margin 2-5-4. padding 1.HTML기초 어제에 이어서 HTML기본 사용법에대해 공부했다. 1-1. ! html 문서를 생성하고 기본적으로 사용되어지는 형식을 '!' 로 간단하게 생성할 수 있다. '!' 를 입력하고 return 을 누르면 자동으로 생성.. 2021. 12. 21. HTML 주요 element input 내용 많아서 따로 정리함. 1. input 기본 적으로 텍스트를 입력할 수 있는 입력창을 랜더링한다. 특징으로는 닫는 태그 따로 없이 단일 element로 실행된다. 랜더링된 입력창에 텍스트를 입력할 수 있다. 1.1 input 의 속성 value input의 속성 중 하나인 value를 이용하면, 페이지가 로드 될 때 기본적으로 입력창에 입력되는 텍스트를 지정할 수 있다. 페이지가 로드 되면 기본적으로 value의 값이 입력되어 있다. 1.2 input의 속성 placeholder 입력창에 아무런 텍스트도 입력 되어지지 않았을 때 표기될 텍스트를 지정할 수 있다. value 와 역할이 비슷해 보이지만 엄염히 다르다. placeholder는 주로 입력창에 입력되어야 할 내용에 대한 설명을 표기한다. 2... 2021. 12. 20. HTML 주요 element 1편 HTML 문서 작성에 자주 이용되는 주요 element 정리한거. body 영역에서 사용되어 지며, 다양한 element를 이용하여 웹페이지을 만들 수 있음. 1. h 주로 제목을 작성할 때 이용하며, h1 부터 h6까지 있다. 각각 font-size가 지정 되어있는데, h1이 가장 크고 h6이 가장 작다. Hello, World! Hello, World! Hello, World! Hello, World! Hello, World! Hello, World! 2.ul , li 얘네는 한쌍으로 같이 움직인다. li 영역에 표기된 텍스트가 리스트 형식으로 랜더링 된다. li element는 무조건 ul element의 자식 element로 사용된다. 리스트1 리스트2 리스트3 리스트4 3.a a element .. 2021. 12. 20. HTML 이란 1. HTML이란 Hyper Text Markup Language의 약자로 웹페이지가 어떻게 구조화 되어있는지 브라우저에게 알려주는 마크업 언어이다. 2.HTML의 특징 2.1 를 사용하여 표기한다. 2.2 를 이용해서 열고 를 이용해서 닫는다. 2.3 안의 내용은 ...element라고 읽는다. 2.4 필수적으로 head element와 body element를 포함한다. 2.4.1 head element head element에 속해있는 자식 element 들은 랜더링 되지 않는다. title element에 속한 텍스트 노드는 브라우저의 탭에 표기된다. Hello, world! 2.4.2 body element body에 담겨있는 내용은 브라우저에 랜더링 되며, html문서의 모든 콘텐츠가 담겨있는.. 2021. 12. 20. 이전 1 다음 728x90 728x90
