컴맹에서 컴공 그리고 화이트 해커가 되는 그날까지

html 1 본문

웹/html

html 1

공부하는 뚱이 2022. 11. 19. 20:35
반응형

웹 해킹을 공부하기 위해서 html, css, js의 필요성을 깨닫고 하나씩 공부해서 더 웹 해킹에 대해 잘 이해하고 싶어서 우선 html을 공부하기로 했다.

html1-1

<!DOCTYPE html> - HTML 문서가 어떤 버전으로 작성되었는지 브라우저에게 알려주는 것이다. 브라우저에게 HTML 의 버전 및 웹브라우저 내용을 잘 출력할 수 있도록 도와주는 역할을 하는 것이다.

 

<head></head> - 해드 태그는 해당 문서에 대한 정보인 메타데이터(metadata)의 집합을 정의할 때 사용한다.

다음과 같은 요소들은 <head> 요소에 포함되어야 한다.

<title>

<style>

<base>

<link>

<meta>

<script>

<noscript>

# 이 중에서 <script> 요소와 <noscript> 요소는 <head> 요소뿐만 아니라 <body> 요소에 포함될 수도 있다.

 

<title></title> - 태그는 웹 페이지의 제목을 나타내는 태그입니다. 웹페이지 본문에는 보이지 않으며, 브라우저의 탭 등에서 확인 할 수 있습니다.

ex) title

<body></body> - 태그는 해당 HTML 문서의 텍스트, 하이퍼링크, 이미지, 리스트 등과 같은 모든 콘텐츠를 포함하는 영역을 정의할 때 사용합니다 즉! 웹 페이지의 몸!! 그러므로 이름이 body이다 

*HTML 문서에는 단 하나의 <body> 요소만이 존재할 수 있다.

 

<!-- --> - html에서 주석을 처리할 때 사용하는 태그 원하는 내용을 드래그 후 [ctrl + /] 를 누르면 자동으로 주석처리가 된다.

주로 코드 내용을 설명할 때 사용한다.

 

h${hello world}*6 - <h> 태그는 문서의 제목을 표시할 때 사용하는 태그로 'heading'의 의미를 가진다. 제목의 크기별로 <h1>부터 <h6>까지 사용이 가능하다. h${hello world}*6를 작성하고 엔터를 치면 h1~h6까지의 hello world가 출력된다.

 

<p></p> - p 태그는 paragraph, 즉 문단의 약자로, 하나의 문단을 만들 때 쓰인다.

 

<sub></sub>,<sup></sup> - sub는 활자 배치를 아래로, sup는 활자 배치를 위로하는 태그이다.

 

sub, sup

<br> - 줄을 바꿔주는 태그이다.

 

<hr> - 콘탠츠 내용에서 주제가 바뀔 때 사용할 수 있는 수평 가로선을 정의할 때 사용한다.

<hr> 구분선

<a></a> - 태그는 하이퍼링크를 걸어주는 태그이다.

● href: 클릭시 이동 할 링크

ex) <a href="http://www.naver.com">Go NAVER</a>

./ - 현제 폴더에 있는 파일로 이동

# - "#아이디"로  아이디를 가진 태그로 이동함 

./ download - 파일을 다운로드 받을 수 있다.

● target: 링크를 여는 방법

   ○ _self: 현재 페이지(기본값)

   ○ _blank : 새탭

   ○ _parent : 부모 페이지로, iframe 등이 사용된 환경에서 쓰인다.

   ○ _top : 최상위 페이지로, iframe 등이 사용된 환경에서 쓰인다.

   ○ 프레임이름 : 직접 프레임이름을 명시해서 사용할 수도 있다.

 

ex) <a href="http://www.naver.com" target="_blank">Go NAVER</a>

 

이외에 유용한 태그

abbr : 준말 표현

ex) <abbr title="World Wide Web">WWW</abbr>

 

kbd : 키보드

ex) <p><kbd>ALT</kbd>키와 <kbd>F4</kbd>키를 동시에 누르면 포커스를 가지고 있는 윈도우를 곧바로 닫을 수 있습니다.</p>

 

pre : 있는 그대로

ex) <pre>     pre 요소 내의 텍스트는 고정폭 글꼴(fixed-width font)을 사용하여 표현되며,  사용된      띄어쓰기와      줄바꿈이 모두 그대로 브라우저 화면에 나타납니다. </pre>

code : 코드블록

 

cite : 인용(q는 인용구, cite는 인용블록

ex) <img src="/examples/images/monalisa.jpg" height="300" width="200" alt="monalisa"> <p><cite>Mona Lisa</cite> 레오나르도 다 빈치, 1503년</p>

 

이제 앞에서 배운 문장들을 사용해서 직접 코드를 작성하여 웹 페이지를 만들어 봐야 진짜 내 것이 될 수 있을 것이다.

직접 만들어볼 페이지의 주제는 지방간에 좋은 음식들이다.

 

<!DOCTYPE html>
<html>
<head>
    <title>지방간에 좋은 음식들</title>
</head>
<body>
   <!--h${hello world}*6 -->
   <h1>지방간에 좋은 음식</h1>
   <p>지방간에 좋은 음식을 알아보겠다.<br></p>
   <h2>지방간이란?</h2>
   <pre>정상적인 간에는 지방이 5% 정도 존재합니다. 지방간은 지방이 간에 침착된 정도가 간 무게의 5% 이상인 경우를 의미합니다. 지방 중에서 중성 지방(트리글리세라이드)이 간세포에 축적됩니다. 지방간은 음식물 등을 통하여 섭취한 지방질을 원활하게 처리하지 못하면서 발생합니다. </pre></p>
   <hr>

   <h2>지방간이 생기는 원인</h2>
   <pre>
    지방간의 4대 원인은 과도한 음주, 비만(복부비만), 당뇨병, 고지혈증입니다.
    지방간은 그 원인에 따라서 알코올성 지방간과 비알코올성 지방간으로 분류됩니다.
    비알코올성 지방간은 하루에 40g(4잔) 이하의 음주를 하는 사람에게 생기는 지방간을 말합니다.
    이는 대부분 과체중, 비만(복부 비만), 당뇨병, 고지혈증 등의 위험 요인과 관련이 있습니다.
    드물게 피임약 등 여성호르몬이나 스테로이드를 포함한 여러 가지 약제를 오래 복용한 사람에게 지방간이 나타나기도 합니다.
    급작스러운 체중 감소나 체중 감소를 위해 수술을 하는 경우에도 지방간이 발생할 수 있습니다. </pre>
    <hr>
    <h2>지방간에 좋은 음식</h2>
    <pre>
1. 미나리(녹색채소)

 

​미나리는 녹색 채소 중에서도 간에 좋기로 유명하다. 미나리는 간의 독성물질을 해독해 주는 효능과 간 기능을 개선 해 주는 효능까지 있어 간의 염증을 완화시켜 주고, 급성간염과 황달, 간경화의 위험​을 줄여주는 효과까지 있다. 미나리 외에도 녹색 채소들은 지방간을 예방 및 개선하는 효과가 좋다.

 

2. 브로콜리

 

지방간에 좋은 음식 중 브로콜리는 간에 지방이 끼는 것을 막아주고 간암을 예방해주는 효능이 있다. 브로콜리를 1주일에 몇 차례 섭취하면 지방간 형성을 막아주고, 이것으로 인해서 생기는 간암, 간기능 부전을 예방할 수 있다.

 

3. 아스파라거스

 

지방간에 좋은 음식으로 아스파라거스는 간 세포의 성장 억제, 알코올 성분과 세포 독소를 줄여주어 간을 보호하는 효능이 있어 숙취에 좋다는 것인 잘 알려져 있다. 아스파라거스는 식이섬유, 비타민, 콜린, 엽산, 칼륨, 미네랄 등이 풍부하다.

 

4. 양배추

 

양배추는 단백질과 지방의 대사를 도와 간에 흡수되어있는 단백질 합성을 보조하고, 간 속의 여분 지방을 처리하고 간 기능을 활성화시켜 준다. 또한 양배추 속에는 비타민U가 간 기능 강화하는 효능을 가지고 있고 간 기능을 도와 지방간을 예방하는데 좋다.

 

5. 레드비트

 

붉은색 채소인 레드비트도 지방간에 좋은 음식 중 하나이다. 레드비트에 풍부하게 함유되어 있는 베타인 성분은 해독작용을 활발하게 해주고 간세포 재상과 콜레스테롤을 낮추는 등 여러 부분에 도움을 주기 때문에 지방을 관리하는데에 효과가 좋다.

 

​6. 홍삼

 

비알콜성 지방간에 좋은 홍삼은 장내 미생물이의 조성 환경을 유익하게 만들어 간 관련 질병의 진행을 예방하는데 도움을 준다고 한다. 홍삼추출물을 투여한 환자들의 간 손상 정도가 15% 감소하고, 간수치가 감소하면서 피로도가 호전​된다고 한다.  알코올성. 비알코올성 지방간을 예방하려면 흰쌀밥, 면, 빵 등의 탄수화물과 지방의 섭취를 자제하는 것이 좋고, 지방간에 좋은 불포화지방산이 풍부한 견과류, 등푸른생선을 자주 섭취하는 것이 좋습니다.
    </pre>
    <a href="http://www.hcnews.or.kr/news/10471">관련 사이트</a>
    <a href="http://www.hcnews.or.kr/news/10471" target="_blank">관련 사이트 새창으로 열기</a>
    <p><cite>지방간이 위험한 이유? 지방간에 좋은 음식!</cite> : 지방간이 위험한 이유와 지방간에 좋은 음식 알려주는 사이트</p>

</body>
</html>

지방간에 좋은 음식들 웹 페이지

결과 화면이다.

 

아직 어색하고 많이 아쉬운 페이지 지만 나중에 실력이 더 성장한다면 더 다양하고 질 좋은 페이지를 만들어 봐야겠다.

반응형

'웹 > html' 카테고리의 다른 글

html 3  (0) 2022.11.20
html 회원가입 페이지 만들기  (0) 2022.11.20
html 2  (0) 2022.11.20
'웹/html' Related Articles more