09009

Bootstrap을 이용하여 레이아웃 잡는 법 - 항상 row 안에 col이 있어야 된다 - row -> col -> row -> col ... 이 순서대로 이어간다. - row 안쪽에 col이 들어가야 하고, col 안에 row가 들어가야 한다. - 컨텐츠(내용)는 항상 col에다가 넣는다 (row는 레이아웃 잡는 용도, col 안쪽에 내용을 첨가한다) - 버튼을 감싸는 col은 d-grid 옵션을 준다. 하나의 col에는 하나의 button만 넣기 - 내용은 항상 col에 넣는다 - 하나의 row는 12등분이 되어 있다. - container class로 div 태그 시작하는 것이 좋다. container: 기본 1200px - div 특성 상 높이는 컨텐츠의 크기만큼 잡힌다.

Navbar Home Link Dropdown Action Another action Something else here Disabled Search 게시판 검색 글번호 구분 제목 글쓴이 조회 날짜 5 잡담 안녕하세요~!!! New 트레이서 13 2020-05-20 4 잡담 반갑습니다~!!!New 한조 1351 2020-05-19 3 질문 오늘 날씨 어떤가요??!! [2] 메르시 78 2020-05-18 2 상담 ㅠㅠ~ [7] 트레이서 88 2020-05-18 1 잡담 야호 한조 778 2020-05-17 « 1 2 3 4 5 » 글쓰기

머리말 영역 (페이지 제목 및 페이지 소개), 문서 또는 섹션의 헤더 - 하이퍼링크를 모아 둔 내비게이션 - 다른 영역과 사이트, 다른 문서 사이를 탐색할 수 있는 링크의 집합 - 문서 안의 모든 링크가 모두 영역에 있는 것은 아니다. - 사이드바 - 본문 흐름에 벗어나는 노트나 팁 - 는 css를 활용하여 스타일을 지정함 - 어느 한 구역 - 문서의 장이나 절에 해당하는 내용 - 문서의 전체 내용과 관련 있는 컨텐츠의 집합 - 은 반드시 heading( ~ )을 가져야 한다. - 본문과 독립적인 컨텐츠 영역 - 개별 뉴스 기사 혹은 게시물을 의미함 과 의 차이 문서에서 독립적인 특정 영역 여러 개의 컨텐츠 묶음 영역 속에서 독립적인 컨텐츠 그 자체로 독립적인 컨텐츠 - 꼬리말(저자나 저작권 정보) 혹은..

공간을 분할하는 이유: CSS로 원하는 레이아웃을 구성하기 위함 공간 분할 태그 - div, span • div : 공간을 블록 형식으로 분할 ✍ 입력 hello hello hello hello hello 💻 출력 공간을 분할할 때 div 태그를 사용하면 각 태그가 한 행을 모두 차지한다. 이를 블록 형식이라 한다. • span : 공간을 인라인 형식으로 분할 ✍ 입력 hello hello hello hello hello 💻 출력 공간을 분할할 때 span 태그를 사용하면 각 태그는 자신의 글자 크기만큼 영역을 차지하게 된다. 왼쪽에서 오른쪽으로 쌓이는데 이를 인라인 형식이라 한다. - 블록 형식 태그와 인라인 형식 태그 종류 블록 형식 태그 인라인 형식 태그 div span h1 ~ h6 a p inp..

입력 양식 태그 - 입력 양식 : 우선 form 태그로 영역을 생성하고 내부에 input 태그를 작성한다. 입력 양식 종류 input 태그 : 사용자로부터 정보를 받아들이는 용도로 사용됨 input 태그의 type 속성을 이용하여 입력 양식을 여러 종류로 변경하여 사용한다. type : 입력 태그의 유형 설정 name : 서버로 전달되는 이름 설정 (사용자 임의 지정) value : 입력 태그의 초기값 설정 (사용자가 변경 가능) 💻 출력 ✍ 입력 label 태그 - input 태그를 설명할 때 사용하는 태그이다. - label 태그는 for 속성에 input 태그의 id 속성을 입력하여 label 태그가 어떤 input 태그를 나타내는지 알려주는 역할을 한다. - for 속성을 연결하면 label 태그..

테이블 태그 - table : 표 생성 - tr : 표의 행 삽입 - th : 표의 제목 셀 생성 - td: 내용이 들어가는 셀 생성 - border: 표의 테두리 두께 지정 - : 표의 테두리를 지정하는 속성 - thead: 머리글 - tbody: 본문글 표를 만들고 셀 추가하기 위와 같은 시간표를 웹에 출력하려면 아래와 같이 html 코드를 작성한다. 월 화 수 목 금 1교시 영어 국어 과학 미술 기술 2교시 도덕 체육 영어 수학 사회 표의 행이 총 3개이므로 3개의 tr 태그 (표의 행 삽입)가 필요하다는 것을 우선적으로 생각해야 한다. colspan, rowspan colspan : 셀의 너비를 지정한다. 정보를 세로로 읽고 싶은 경우 사용 rowspan : 셀의 높이를 지정한다. 정보를 가로로 ..

글자 태그 • 제목 글자 : h1 > h2 > h3 > h4 > h5 > h6 (왼쪽으로 갈수록 글자의 크기가 커진다) • 본문 글자 - p : 단락, 본문 문단 생성 (paragraph) - br : 줄바꿈 (break) - hr : 수평 줄 삽입 본문 단락 구분하기 💻 출력 ✍ 입력 나폴리 괴물 공격수 향해 ‘빅클럽 5팀 격돌’...‘최고액 판매 가능?’ 이탈리아 ‘아레나 나폴리’는 28일, ‘코리에레 델로 스포르트’를 인용 “오시멘은 자신의 역사를 다시 쓸 수 있다. . 그는 나폴리의 클럽 레코드였으며, 역대 최고액으로 떠날 수도 있다. 그를 좋아하지 않는 팀은 없다”라고 보도했다. 제목과 본문 태그 💻 출력 ✍ 입력 홍차 정의 홍차는 백차, 녹차, 우롱차보다 더 많이 발효된 차의 일종이다. .....

HTML 기본 형태 생성 VS Code 창에서 !를 작성하고 enter를 누르거나 ht 약어를 작성한 후 html:5를 선택하여 enter를 클릭하면 html 기본 형태가 자동으로 생성된다. 내부 스타일시트 작성과 실행 head나 body 태그에 아래와 같이 style 태그를 생성 후 저장하고 실행한다. ✍ 입력 Hello World..! 💻 출력 외부 스타일시트 작성과 실행 위에서 내부 스타일시트에 style 태그를 작성했던 것과 달리 이번에는 파일을 따로 생성하여 작성한다. 일단 기존 html 문서를 작성한 뒤 ✍ 2-4.html Hello World..! VS Code에서 [파일] - [새 파일] 메뉴를 선택하여 새 파일을 생성하고 파일 확장자를 CSS로 설정한다. 파일 이름은 style.css로 ..