운좋개

🟡 1. 웹페이지 공간 분할 - 지금까지 HTML을 공부한 이유는 웹사이트를 만들기 위해서 공부를 했는데, 웹사이트를 잘 만들기 위해서는 초반 설계부터 잘해야 차후에 수정할 일이 많이 안 생깁니다. 그러기 위해서는 전체적인 큰 틀 즉 레이아웃을 잘 설계하고 화면 분할을 잘해야 됩니다. (건물을 짓기 전에 도면을 잘 만들어야 되는 거처럼) - 레이아웃을 구성하기 위해서는 공간을 분할을 하는데, 위 사진에 나온 예시가 보편적인 분할 종류입니다. 아래 사진은 실제 운영되고 있는 웹사이트 예시입니다. 예시 찾다가 포기... 예시 찾다가 포기... 🟡 2. 공간 분할 태그 - 공간을 분할하는 태그들로는 div, span, table 등이 있습니다. 과거 웹사이트에서는 주로 table로 공간 분할을 많이 했지만, ..

🟡 1. select 태그 - select 태그는 form 태그 안에서 사용하는 입력 태그 중에 목록을 나타내고 싶을 때 사용합니다. - select 태그는 option 태그를 사용하여 항목들을 하나하나 나타낼 수 있습니다. 속성 설명 name select 태그의 이름을 설정 합니다. size 목록(select)을 펼치기 전에 보여질 항목의 개수를 설정 합니다. multiple 다중값을 선택 가능하도록 설정합니다. disabled 화면에는 표시되지만 선택을 할 수 없게 설정합니다. autofocus 웹 페이지 로딩된 후 목록으로 바로 포커스가 맞춰지게 설정합니다. 🟣 size 속성 1 2 3 4 5 🟣 mutiple 속성 1 2 3 4 5 🟣 disabled 속성 1 2 3 4 5 🟡 1.1 select..

🟡 1. form 태그 안에서 사용되는 입력 태그의 종류 input : 웹사이트에서 흔히 입력을 받는 거의 모든 종류를 input 태그라고 합니다. checkbox, date, email, radio, range 등등 select : 여러 개의 리스트에서 여러 개의 아이템을 선택할 때 사용됩니다. textarea : 긴 글을 입력할 때 사용되는 태그입니다. 주로 자기소개서 입력창 같은 곳에서 사용합니다. button : 서버로 전송을 실행하는 submit버튼, reset 하는 버튼 등이 있습니다. fieldset/ legend : 입력 태그들을 그룹화할 때 사용합니다. 🟡 2. Input 태그 - input 태그는 form태그 안에서 사용되는 입력 태그 중에서 가장 중요하면서 많이 사용되는 태그입니다. ..

🟡 1. form 태그 - form 태그는 사용자가 웹사이트를 통해 입력한 데이터를 수집하기 위해 사용되는 태그입니다. input, button, textarea, select, checkbox, radio button, submit button 등의 입력 양식 태그를 통해서 데이터를 수집합니다. 그리고 수집한 데이터를 하나로 묶어서 서버로 전송을 하는 역할을 합니다. userID: id: form 태그 실제 브라우저 화면 submit 버튼을 눌러 form 안에 데이터를 서버로 보낸 후 받은 결과 위에 예시처럼 form 태그는 form태그 안에 있는 입력 양식 태그들의 데이터를 모아서 서버에서 보내는 역할을 합니다. 아래 사진은 우리가 실생활에서 form태그를 접할 수 있는 예시입니다. 🟡 1.2 for..

🟡 1. img 태그 (이미지) - img 태그를 이용하면, 웹사이트에 이미지를 삽입할 수 있습니다. img 태그의 속성은 크게 4가지가 있습니다. 속성 설명 src src 속성은 이미지의 주소를 나타냅니다. 컴퓨터 내부의 파일 경로가 될 수 도 있고, 웹주소가 될 수도 있습니다. - 지옥사진은 웹주소, 라이언 사진은 컴퓨터 내부 주소. alt 이미지의 설명을 나타내는 속성입니다. 이미지 파일을 찾지 못하는 경우 이미지 대신 표시가 됩니다. width 이미지의 너비를 조절 할 수 있는 속성입니다. height 이미지의 높이를 조절 할 수 있는 속성입니다. 🟡 2. audio 태그 (음악, 오디오) - audio 태그는 오디오 파일을 삽일 할 수 있는 태그입니다. HTML5에서 추가된 태그로 IE8이하에서..

🟡 1. List(목록) 🟡 1.1 ul (순서가 없는 목록 - Unordered List) - ul 태그는 list 태그 중에서 순서가 없이 목록을 나타내고 싶을 때 사용하는 태그입니다. 내가 좋아하는 음식 목록 김치찌개 삼겹살 잡채 국밥 🟡 1.2 ol (순서가 있는 목록 - Ordered List) - ol 태그는 순서가 있는 목록을 나타내고자 할 때 사용하는 태그입니다. 내가 좋아하는 음식 순서 국밥 잡채 김치찌개 삼겹살 - type 속성을 이용하여 순서를 나타내는 문자를 바꿀 수도 있습니다. Value 설명 예시 코드 결과 1 숫자 (기본값) 아메리카노 페퍼민트 A 대문자 알파벳 아메리카노 페퍼민트 a 소문자 알파벳 아메리카노 페퍼민트 I 대문자 로마숫자 아메리카노 페퍼민트 i 소문자 로마숫자 ..

🟡 1. hyperlink - hyperlink는 html link라고도 불리고, hyperlink를 눌렀을 시 작성자가 설명하고자 하는 내용이 있는 웹주소로 이동하게 됩니다. 태그로는 a 태그를 사용하고 있습니다. 네이버 홈페이지 고고 네이버 홈페이지 고고 🟡 1.1 href 속성(attribute) - href 속성은 이동하고자 하는 정보나 파일의 위치(경로)를 지정해줍니다. 경로는 웹사이트의 주소 일 수도 있고, 내 컴퓨터 안에 파일 경로 일 수도 있습니다. 🟡 1.1.1 디렉토리(Directory) - 디렉토리는 컴퓨팅에서 파일을 분류하기 위해 사용하는 이름 공간이라고 위키백과에서는 설명하고 있는데, 쉽게 말해서 폴더라고 생각하면 됩니다. 조금 TMI를 하자면 MS-DOS, UNIX와 같은 CLI..

🟡 1. p 태그 - p 태그는 단락을 지정할 때 사용합니다. 첫번째 단락입니다! 두번째 단락입니다!!!!! 🟡 2. br 태그 - br 태그는 줄 바꿈을 해주는 태그입니다. 어려운 말로는 개행(line break)을 지정한다고 하는데, 결국 줄 바꿈을 뜻하는 말입니다. 그리고 br 태그는 빈 요소이므로 종료 태그가 없습니다. 첫번째 단락입니다! 두번째 단락입니다!!!!! - br 태그는 개수만큼 줄 바꿈이 진행이 됩니다. br 태그 1개 br 태그 4개 첫번째 단락입니다!두번째 단락입니다!!!!! 첫번째 단락입니다!두번째 단락입니다!!!!! 🟡 3. p 태그와 br 태그의 차이점 - '그럼 p 태그와 br 태그 둘 다 줄 바꿈을 하는데, 차이점은 모지?'라는 생각이 들 것입니다. 쉽게 차이를 보기 위해..

🟡 1. 제목 (headings) 태그 - heading 태그는 h1 ~ h6까지 있으며, 제목을 나타낼 때 사용합니다. h1이 제일 크기가 크고 중요도가 높으며 숫자가 작아질수록 크기도 작아집니다. 검색엔진에서는 heading 태그를 통해서 제목이라고 인식하는 경우가 많으므로, 제목 이외에 사용은 하지 않는 것이 좋습니다. h1 태그 h2 태그 h3 태그 h4 태그 h5 태그 h6 태그 🟡 2. 폰트 (text Formatting) 태그 🟡 2.1 b 태그 - b태그는 bold의 약자로 글자를 bold 처리합니다. 보통 글씨체 볼드 글씨체 🟡 2.2 strong 태그 - b태그처럼 글자를 bold 처리해준다. b태그와 다른 점은 b태그는 단순 텍스트를 진하게 표시하는 것이지만, strong태그는 실제로..

🟡 1. DOCTYPE html - DOCTYPE html이란 웹문서가 어떤 버전의 html 언어로 작성되었지를 표시하는 기능을 하는 태그입니다. 이를 문서 형식 정의(Document Type Definition, DTD) 태그라고 하는데, html문서 최상단에 위치해야 합니다. 그럼 웹브라우저는 DTD를 통해서 맞는 버전에 맞게 페이지를 로드해줍니다. HTML5 HTML 4.01 HTML 1.0 🟡 2. html tag 화면에 실제로 보이는 구간 - html태그는 모든 HTML요소들의 부모 요소이자 웹페이지의 제일 큰 테두리입니다. 그리고 웹페이지에서 단 한 번만 기술되면 됩니다. 🟡 3. head tag - head 태그 안에는 많은 메타데이터(다른 데이터를 설명하는 데이터)들을 포함할 수 있고, 그..