벤처창업 웹 프로그래밍 2주차 복습

HTML은 <!doctype html>로 시작하고

<html> <head> <body> 등의 태그로 문법을 작성한다.

해당 태그를 닫을 때 </html> </head> 로 마무리 지으면 된다.

기본 문법 하나를 살펴보자

1. 기본 문서 제작 코드

<!doctype html>
<html lang = "ko">
	<head>
    	<meta charset = "utf-8">
        <title> basic html doc </title?
    </head>
    <body>
    	<h1> 시험 공부는 미리미리 </h1>
        <p> 지금 당장 하고 싶은 일을 위해서 내가 평생 하고 싶었던 것을 포기하지 말자 </p>
    </body>
</html>

<head>에는 주로 설정 코드들이 들어간다.

<title> </title>에는 페이지 제목으로 사용될 문구를 넣으면 된다. 이때 따옴표는 필요하지 않다

<h1> 은 헤딩태그 : 문장의 제목을 의미

<p> 는 문단태그로 긴 문장들을 하나의 문단으로 작성하게 해준다.

2. 표 생성 코드

다음으로 표를 생성하는 코드를 살펴보자.

<!doctype html>
<html lang = "ko">
<head>
	<meta charset = "utf-8">
    <title> create table </title>
    <style>
    	table,th,td{border:1px solid #ccc;}
        td{padding:5px;}
    </style>
</head>
<body>
	<table>
    	<tr><th> title </th> <td> 1,2 </td> <td> 1,3 </td></tr>
        <tr><th> title </th> <td> 2,2 </td> <td> 2,3 </td></tr>
    </table>
</body>
</html>

<head>는 html 문서의 설정부분에 해당하는 코드들을 적는데 이번에는 <style> 코드가 있다. style 태그는 스타일시트를 표현할 수 있도록 해주는 태그이다. 스타일시트 문법에 대해서 더 자세히 다뤄보자. 일단 CSS style sheet를 사용하려면 head 태그 안에서 style 태그를 만들어서 그 안에 css 문법을 기재하면 된다. css는 설정된 문법이 적용될 태그나 목표지점을 기재하고 중괄호 안에 스타일 시트 설정 내용을 작성하면 된다.

위의 코드에서 CSS 코드 부분만 따로 떼어보자.

<head>
.
.
<style>
 table,th,td {border:1px solid #ccc;}
 td {padding:5px;}
</style>
</head>

table,th,td {border:1px}는 table, th, td 태그에 중괄호 안에 있는 설정을 적용하겠다는 뜻으로 지금은 테두리(border)를 1px로 설정하겠다는 뜻이다. 그리고 td에는 추가적인 설정이 필요해서 다음 줄에 td {padding:5px;}를 설정해주었다. 여기에서 또 주의할 점은 스타일시트 중괄호 괄호 안에는 명령이 끝나면 세미클론으로 마무리 한다는 점이다!!! padding은 셀 테두리와 내용 사이의 간격을 말하는 용어이다.

스타일시트에는 태그, 도트로 표기되는 클래스, 샵으로 표기되는 아이디가 있고 이들을 통해서 스타일을 적용한다. 태그, 클래스, 아이디들을 스타일에 대한 셀렉터라고 부른다.

스타일 시트에 관한 내용은 이것까지만 다루고 다음 body 부분에서 다룬 테이블 형성 코드를 보도록 하자. tr은 하나의 행을 생성해주는 코드로 하나의 행에 대한 설정이 끝났으면 </tr>로 닫아주면된다. th는 셀들 중에서 열 이름에 해당하고 첫번째 열만 th로 설정하고 나머지는 td로 설정한다.

3. 이미지 HTML

다음은 이미지 파일을 보이게 하는 코드이다.

<!doctype html>
<html lang = "ko">
<head>
	<meta charset = 'utf-8'>
    <meta name = "viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> image insert </title>
</head>
<body>
	<h1> image </h2>
    <img src="images/cover.jpg" alt="no image">
</body>
</html>

image를 불러오면서 추가적인 코드가 생겼는데

<meta name = "viewport" content="width=device-width, initial-scale=1.0">

-> content=" " 내용은 너비는 디바이스의 너비에 맞추고 초기 크기는 1:1로 맞춘다는 의미이다.

<meta http-equiv="X-UA-Compatible" content="ie=edge">

-> 이건 뭐임..?

<img src="images/cover.jpg" alt="no image">

-> body 부분에 있는 이 코드는 이미지의 루트? 어드레스?를 나타낸 것이다. 아 적절한 말이 떠올랐다. 이미지 파일의 경로를 적으면 됨!!! 이 코드 같은 경우는 images 폴더 안에 있는 cover.jpg를 가져오겠다는 말이다. 옆에 있는 alt = "no image"는 그림파일을 불러오지 못했을 경우 대안(alter)로 실행할 코드이다. 따라서 만약 내가 설정한 경로에 적절한 파일이 없다면 화면에 no image가 뜨게 된다.

4. FORM HTML

다음은 교수님께서 아주아주 중요하다고 강조하셨던 폼태그이다!!

Form tag : 데이터를 입력받고 데이터를 서버 안쪽으로 전달하는 작업에 사용된다.

<!doctype html>
<html lang = "ko">
<head>
    <meta charset = "utf-8">
    <title> HTML FORM </title>
</head>
<body>
	<form action="search.php" method="post">
    	<input type="text" title="검색">
    	<input type="submit" value="검색">
	</form>
</body>
</html>

폼태그는 우리가 웹사이트를 방문했을 때 쉽게 볼 수 있었던 아이디 입력 버튼이나 검색어 검색 버튼 등을 만들어주는 코드이다. 폼태그는 바디 부분에 적용되므로 다른 부분은 위에서 다뤘던 코드들과 동일하니까 설명은 패스하겠다. 바디 부분에 <form> </form> 이 사이에 설정코드들을 넣어주면 되는데 우리가 <html>을 열때 이 사이에 <html lang="ko"> 처럼 부연 설정을 붙이는 것처럼 여기에서도 그러면 된당!!! 예시 코드에서는 <form action="search.php" method="post">라고 설정해두었는데 이 코드의 의미는 다음과 같다.

* action 속성에서 search.php 파일은 데이터를 전달되는 타겟이다.

* Method 속성은 전달될 때의 방식이고 post / get 둘 중 하나를 쓴다.

-> post는 페이지 단위의 데이터 전달이고, get은 url을 통해서 데이터를 전달하는 방식이다.

method 속성은 전달될 때의 방식임.

5. TEXT AREA 텍스트 에리어 HTML

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
    <title> Web Form </title>
  	<style>
    	form fieldset {margin:10px 0;}
        form legend {font-size:18px; color:#0066FF; font-weight:600;}
        form label.reg {font-size:14px; width:120px; float:left;}
        form label em {font-size:15px; color:red; font_weight:800;}
        form label ul li {list-style:none; margin:10px 0;}
        form .easys {text-align:left; font-size:12px; color:blue;}
        form fieldset.sendform {text-align:center;}
    </style>
</head>
<body>
	<form>
    <fieldset class ="login">
    <legend> login </legend>
    <label for="user id"> 아이디 </label>
    <input type = "text" id="user id" size="10" autofocus>
    <label for="user pw"> 비밀번호 </label>
    <input type="password" id="user pw" size="10">
    <input type="submit" value="로그인">
    </fieldset>
    <fieldset class="register">
    <legend> 가입하기 </legend>
    <ul>
    	<li>
        	<label class="reg" for="user_name"> 아이디 <em>*</em></label>
            <input type="text" id="new_id" size="20" autocomplete="on" required>
        </li>
        <li>
        	<label class="reg" for="new_pw1"> 비밀번호 <em>*</em></label>
            <input type="password" id="new_pw1" size="20" required>
        </li>
        <li>
        	<label class="reg" for="new_pw2"> 비밀번호 확인 <em>*</em></label>
            <input type="text" id="new_pw2" size="20" required>
        </li>
        <li>
        	<label class="reg" for="user_name"> 이름 <em>*</em></label>
            <input type="text" id="user_name" size="20" required>
        </li>
        <li>
        	<label class="reg" for="user_mail"> 메일 주소 <em>*</em></label>
            <input type="email" id="user_mail size="20" required>
        </li>
        <li>
        	<label class="reg" for="user_tel">전화번호</label>
            <input type="tel" id="user_tel" size="20">
        </li>
    </ul>
    </fieldset>
    <fieldset class="easys">
    <legend> 이지스퍼블리싱 </legend>
    <textarea name = "intro" cols="60" rows ="5">
    열심히 사는 사람들의 손을 잡아주는 곳 - 이지스 퍼블리싱
    우리는 책을 내기 전에 다시 한 번 물어봅니다
    "이 책이 사람들에게 도움이 되는가?"
    더 쉽게, 더 빠르게 지식을 전달하고 싶습니다.
    </textarea>
    </fieldset>
    <fieldset class="sendform">
    	<input type="submit" value="가입하기">
        <input type="reset" value="다시쓰기">
    </fieldset>
    </form>
</body>
</html>

여기에서 다루는 중요 포인트는 텍스트 에리어이다. Text Area는 장문의 문자 데이터를 입력할 수 있게 해주는 태그이다.

텍스트 에리어의 문법을 보면

<textarea name="intro" cols="60" rows="5">

장

문

입

력

</textarea>

가 문법이다.

6. Tag selector HTML

다음은 태그 셀렉터이다.

태그셀렉터를 활용한 코드를 보자.

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
    <title> BLUEBERRY </title>
    <style>
    	h2 {color:blue;}
        p {font-size:12px;
          margin-left:20px;}
    </style>
</head>
<body>
    <h1> 블루베리에 관한 연구 </h1>
    <h2> 블루베리와 항산화 효능 </h2>
    <p> 블루베리는 항산화제인 안토시아닌과 폴리페놀을 다량 포함하고 있습니다.</p>
    <p>매사츄세츠 보스톤에 있는 USDA 노화에 관한 인류 영양 연구센터의 자료에 의하면 블루베리는 과일 중에서 가장 항산화 작용이 뛰어난 과일이라고 합니다.  </p>
    <h2>블루베리와 노화</h2>
    <p> USDA 인류 영양 연구센터(the USDA Human Nutrition Research Center) 실험실에서 신경과학자들은 쥐들에게 블루베리를 먹임으로써 노화에 의한 인지능력의 손실을 예방해 준다는 사실을 발견하였습니다. </p>
</body>
</html>

저작자표시

'학교 공부 > 벤처창업 웹프로그래밍' 카테고리의 다른 글

12주차 워드프레스 + 구글 애널리틱스 적용 (0)	2022.11.23
중간고사 범위 정리 pdf (2,3,7주차) (0)	2022.10.26
중간고사 범위 정리 pdf (4주차 ~6주차) (0)	2022.10.26
벤처창업 웹 프로그래밍 3주차 리뷰 - PHP 내장함수 (0)	2022.10.25
7주차 데이터조작 (0)	2022.10.19

멋진 어른이 될거예요

벤처창업 웹 프로그래밍 2주차 복습 - HTML

1. 기본 문서 제작 코드

2. 표 생성 코드

3. 이미지 HTML

4. FORM HTML

5. TEXT AREA 텍스트 에리어 HTML

6. Tag selector HTML

'학교 공부 > 벤처창업 웹프로그래밍' 카테고리의 다른 글

티스토리툴바

벤처창업 웹 프로그래밍 2주차 복습 - HTML

1. 기본 문서 제작 코드

2. 표 생성 코드

3. 이미지 HTML

4. FORM HTML

5. TEXT AREA 텍스트 에리어 HTML

6. Tag selector HTML

'학교 공부 > 벤처창업 웹프로그래밍' 카테고리의 다른 글

'학교 공부/벤처창업 웹프로그래밍' Related Articles

티스토리툴바