FE/HTML8 [HTML] 공간 분할 태그 (span, div, 시맨틱 태그) *작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다. 네이버와 같은 유명한 사이트를 분석하기 위해 개발자 도구(F12)를 보면div 태그가 수없이 많은 것을 볼 수 있다. 그런데 HTML을 처음 접하면 span태그랑 div태그는 하는 일도 없고도대체 왜 많이 쓴다는거지???? 라는 생각이 들 수 있다. (=과거의 나) 이에 대해서 오늘 자세하고 쉽게 알아보자. 1. 태그내가 가장 좋아하는 색은 파란색이야.이번 게시물의 주제가 공간분할 태그이지만,span태그는 공간을 분할한다기 보다는 css를 적용할 때 사용한다.하지만, 보통 span태그와 div태그를 많이 묶어서 설명하기 때문에 이번 게시물에서 다루었다. 문장을 작성하고, 그 문장 안에서 몇 글자만 스타일을 적용하고 싶을 때 sp.. 2024. 6. 12. [HTML] 사용자 입력 태그 *작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다. 우리는 사용자의 입력을 받아야하는 다양한 상황이 존재한다.예를 들면 회원가입이나, 로그인 등이럴 때 사용할 수 있는것이 input 태그이다. 입력 양식을 받을 때 기본적인 구조는 태그 안에 다양한 태그들을 넣어서 사용한다. 1. 태그입력 양식의 영역을 생성하는 태그이다. form 태그의 속성을 이용해서 데이터를 어디로 어떻게 전송할지를 설정할 수 있다.기억해야 될 것은, form태그 안에 form이 들어갈 수 없다는 것이다. 즉. 중첩될 수 없다. form태그 안에는 다양한 속성이 있는데 주로 사용하는 속성은 아래와 같다.속성설명action입력값이 제출되었을 때, 데이터를 보낼 URL을 지정한다.** submit 타입의 inp.. 2024. 6. 12. [HTML] 미디어태그-이미지(Image), 오디오(Audio), 비디오(Video), 유튜브(Youtube) *작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다. 1. 이미지 태그이미지 태그에는 src속성과 alt속성이 반드시 있어야한다. src 속성이미지의 경로를 지정한다. 파일의 형식은 jpeg, png, gif를 추천한다.외부 url도 가능하고, 컴퓨터 내의 이미지도 가능한데, 이 때 경로는 절대 경로와 상대 경로 모두 가능하다.💡 절대 경로 : 전체 경로를 포함하여 리소스의 위치를 지정한다.💡 상대 경로 : 현재 문서의 우치를 기준으로 리소스의 위치를 지정한다. alt 속성이미지를 정상적으로 불러오지 못했을 때 이미지에 대한 대체 텍스트를 나타낸다. 이미지의 크기 조절은 HTML의 height와 width 속성으로 가능하지만, CSS로 하기를 공식 문서에서 권장하고 있다.이미지.. 2024. 6. 2. [HTML] 테이블(Table) 태그 *작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다. 테이블 태그는 표를 만들 수 있는 태그이다.관련된 태그가 많기는 하지만 중요하게 사용하는 것들은 많지 않다. 가장 기본적으로 알고 있어야 할 태그들은 , , , 이다.이 네가지 태그만 알고 있어도 표를 만드는 데 문제는 없다. 1. 테이블 영역을 생성한다. 2. 테이블의 한 줄을 의미한다. 3. 테이블에서 헤더 데이터를 삽입한다. 굵은 글씨로 표시된다. 4. 테이블에 데이터 하나를 삽입한다. 위의 네가지로 만든 테이블을 예제로 보자. Company Contact Country Alfreds Futterkiste Maria Anders Germany Centro com.. 2024. 6. 1. [HTML] 목록 태그 *작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다. 웹 사이트에 무조건 있는 요소 중 하나는 내비게이션 메뉴이다.메뉴바를 만들 때 주로 목록 태그를 사용하는데, 이번 게시글은 목록 태그에 대해서 다뤄보고자 한다. 목록 태그에는 ul, ol, dl 세가지가 있다.주로 ul, ol을 사용하며 dl은 거의 사용하지 않는다. 1. Unordered List순서가 없는 목록을 의미하며, 각 리스트 아이템 앞에 동그라미 점이 찍힌다.태그를 사용하며, 태그 안의 리스트 아이템은 를 사용한다. Coffee Tea Milk 2. Ordered List순서가 있는 목록을 의미하며, 각 리스트 아이템 앞에 숫자가 생긴다. 태그를 사용하며, 태그 안의 리스트 아이템은 를 사용한다. Coffe.. 2024. 6. 1. [HTML] 글자 관련 기본 태그 *작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다. HTML에는 다양한 태그가 있다.특히 사용자에게 보여지는 body태그 안에는 다양한 태그가 들어갈 수 있다. 가장 기본적으로 사용되는 글자 태그들에 대해서 알아보고자 한다. 1. 제목 태그제목태그는 제목을 의미하며, h1부터 h6까지 존재한다. h1이 가장 큰 제목 태그이고 h6이 가장 작은 제목 태그이다. This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 62. 단락태그 하나의 단락을 의미한다. 하나의 단락이 끝나면 자동으로 줄바꿈이 된다.title 속성을 사용하면 커서가 구.. 2024. 6. 1. HTML 기본 구조와 작성법 *작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다. HTML이란?웹 페이지에 사용되는 표준 기술을 세가지로 구분할 수 있다.HTML, CSS, JavaScript이다. HTML은 웹 페이지를 구성하는 역할을 하고, CSS를 통하여 문서의 스타일을 추가한다.그리고 JavaScript를 이용하여 페이지의 동적인 처리 기능을 추가할 수 있다. HTML 작성 방법새로운 html파일을 생성한 후 !를 누르면 아래 사진과 같이 뜬다.이 상태에서 Tab 또는 Enter키를 누르면 html 문서의 기본 구조가 자동으로 작성된다.HTML의 구조HTML의 대부분 문장은 다음의 문법을 따른다.데이터이 문법만 알면 HTML 문서를 해석하는 것은 크게 어렵지 않다. 먼저, 처음 HTML파일을 만들면 나.. 2024. 6. 1. VS Code(Visual Studio Code) 설치 *작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다.VS Code(Visual Studio Code) 설치- 파일 확장명 보이기아무 폴더나 열어서 상단에 있는 ‘보기’탭을 누른다.파일 확장명 체크박스를 선택한다.파일의 확장명이 뜨는지 확인한다.💡 개발을 진행할 때 파일의 확장명은 매우 중요하므로, 폴더에서 바로 확인할 수 있도록 설정한다. - Visual Studio Code 다운로드아래 사이트에 접속하여, 사용자의 환경에 맞는 버전을 설치한다.https://code.visualstudio.com/download다운로드 받은 exe 파일을 실행하고, 별다른 설정은 없이 기본 설정으로 설정하면 된다. - 작업폴더 생성하기원하는 위치에 원하는 이름으로 폴더를 생성한다.Visual S.. 2024. 6. 1. 이전 1 다음
