CSS 썸네일형 리스트형 Visual Studio Code :: table을 통한 게시판 만들기 및 Flex 목차 수업 목표 Table 2-1. HTML 2-2. 렌더링 오류 및 수정 Flex 1. 수업 목표 을 이용하여 게시판을 만들고, 각 항목을 클릭 했을 때 링크가 이동하도록 만들기. 게시판에 글을 쓸 수 있도록 만들기. Flex를 통한 위치 조절하는 방법 배우기. 2. Table 은 과 를 사용하여 표 형식의 게시판을 만들 수 있습니다. 은 세로열을 나타내고 는 가로열을 나타냅니다. 를 통해 링크를 걸 수 있습니다. 2-1. HTML 코드 구성은 다음과 같습니다. 게시판로고 번호 제목 작성일 작성자 조회수 1 안녕하세요 2021-12-29 비숑 0 2 가입했습니다 2021-12-29 말티즈 1 글쓰기 게시판로고 글보기 입니다 게시판로고 제목 이름 비밀번호 내용 글쓰기 2-2. 렌더링 table을 통해 게.. 더보기 Visual Studio Code :: 클론코딩 (네이버 회원가입화면) 목차 목표 HTML CSS 오류 및 수정 추가내용(Input:focus) 최종화면 1. 목표 오늘의 목표는 네이버 회원가입 화면을 클론코딩 하는 것입니다. 2. HTML 우선 부분을 나누어서 생각했습니다. 아이디 @naver.com 비밀번호 비밀번호 재확인 HTML의 내용은 크게 어려운 것은 없었습니다. ID 입력 부분에 뒤에 @naver.com을 고정으로 하기 위해 을 주었습니다. 입력이 가능하도록 하기 위해 input 박스 type을 text로 주었고 비밀번호 부분에는 * 표시로 보여지기 위해 password로 주었습니다. 3. CSS CSS의 전체적인 내용은 아래와 같습니다. *{ margin: 0; padding: 0; } ul,li{list-style:none;} a{text-decoration.. 더보기 Visual Studio Code :: 모달 팝업(레이어 팝업) 만들기 목차 수업 목표 HTML 2-1. input 2-2. label CSS 3-1. Input 꾸며주기 3-2. Background 3-3. Pop-up 창 3-4. Box-shadow 최종화면 오류 및 수정 !important class 여러개 지정하기 1. 수업 목표 버튼 클릭 했을 때 팝업 나오고, 팝업에 X키 누르면 팝업이 사라지게 만들기 2. HTML 부분의 전체적인 코드입니다. 버튼 제목 X 컨텐츠 영역입니다. HTML만 적용하게 되면 이런식으로 렌더링 됩니다. 2-1. input 버튼 어제와 마찬가지로 input type를 checkbox로 주게 되면 아래와 같이 선택 가능한 체크박스가 생성됩니다. 2-2. label 제목 X 컨텐츠 영역입니다. 를 주어 제목과 컨텐츠 영역을 생성해 주면 아래와.. 더보기 Visual Studio Code :: Input 사용하기 목차 수업 목표 HTML 2-1. Input 2-2. Label CSS 3-1. 아이콘 만들기 3-2. Input[id="!@#$%^"] 3-3. span:nth-child(#) 3-4. :checked 3-5. transition 오류 및 수정 결과 화면 1. 수업 목표 오늘의 수업 목표는 세 줄로 구성된 햄버거 버튼에에 마우스를 갖다 대었을 때 커서의 변환 모습과 햄버거 버튼을 클릭 했을 때 변화되는 모습을 만드는 것이 목표입니다. 2. HTML menu1 menu2 menu3 menu4 menu5 뒤에 을 세개 준 이유는 햄버거 버튼을 만드는데 세 줄이 필요하기 때문입니다. 는 햄버거 버튼을 클릭 후에 나오는 화면에 들어갈 내용을 입력하기 위해 구성하였습니다. 2-1. Input Input 의 특징.. 더보기 Visual Studio Code :: CSS를 이용해서 클론페이지 만들기 목차 목표 및 클론페이지 HTML : DOCTYPE 선언 및 HEAD 구성 HTML : BODY 구성 3-1. HTML : Header 3-2. HTML : Menu 3-3. HTML : Visual CSS 4-1. Margin, List-style, Wrap 4-2. Header, Logo 4-3. Menu 4-4. Visual 원본과 최종 결과물 비교 1. 목표 및 클론페이지 이번에 목표로 잡은 페이지 입니다. 경일게임아카데미 메인 화면에 있는 이 부분을 따라 만들어보려고 합니다. 2. HTML : DOCTYPE 선언 및 HEAD 구성 DOCTYPE 선언은 HTML 문서에서 태그를 정의 하기 전에 가장 먼저 선언되어야 한다고 합니다. head의 구성은 다음과 같이 작성했습니다. 이번 CSS의 이름은 .. 더보기 Visual Studio Code :: 테이블 만들기 그리고 CSS 및 경로 목차 1. 테이블 만들기 2. 경로 3. CSS란? 3-1. CSS 적용방법 4. ID란? 5. 적용해보기 1. 테이블 만들기 테이블은 게시판 만들 때 많이 사용합니다. (실제 구동되는 게시판) table 만드는 방법은 table 엘리먼트를 사용하면 됩니다. 테이블은 줄과 칸을 만들어서 사용하면 됩니다. 다음과 같은 3*4 테이블을 만들어 보려고 합니다. 우선 html에서 코딩을 할 때에는 줄을 먼저 만들고 그 뒤에 칸을 생성합니다. 줄을 생성하는 엘리먼트는 입니다. 이렇게 하면 세줄이 완성 되는 것이고 칸을 생성하는 엘리먼트는 입니다. 이것을 사용해서 3*4 테이블을 만들게 되면 이런식으로 만들어지게 됩니다. 이것을 적용하면 -->> border을 입력한 이유는 투명한 칸에 선을 눈에 보이도록 하기 위.. 더보기 이전 1 다음
