안녕하세요.
행운공장 입니다.
이번 포스팅은 html에서 주석처리를 하는 방법과, 색상코드에 대해서 다루어 보겠습니다.
● 주석처리
html에서 주석으로 처리한다는 것은, 코드에서는 보이지만, 실제 화면에서는 보이지 않게 처리한다는 것을 뜻합니다. 표현되는 코딩 방식은 "<!-- 주석멘트 -->"처럼 합니다. 반드시 "<!--"과 "-->"가 사용되어져야 합니다. 주석은 여러가지 형태로 활용됩니다. 코딩된 내용을 한눈에 쉽게 파악하기 위해서 "<!-- 이 구역은 헤드의 주메뉴 버튼 입니다 -->"라는 식으로 입력합니다. 멘트는 개인이 자유롭게 써도 어차피 화면에는 안보이기 때문에 마음대로 알아보기 쉽게 쓰면 됩니다. 단, 회사에서는 회사의 규칙에 따라서 멘트를 써주어야 합니다. 그리고, 주석은 코딩된 쏘스를 굳이 지우지 않고, 일시적으로 감추어서 화면에 어떻게 나타나는지 궁금할때도 사용됩니다. 그리고, 다른 작업자에게 메모를 남길때도 사용될 수 있습니다. 주석은 화면에 안보이기 때문에 코딩하는 사람이 잘 활용하면, 효율적인 코딩에 도움이 됩니다. 아래의 코딩된 html의 <body>태그 사이의 <p>태그들의 내용을 유심히 봐 주세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>html_주석처리와 색상코드</title>
<meta charset="UTF-8">
<meta name="description" content="행운공장이 블로그를 하는 사이트">
<meta name="keywords" content="로또예상번호, html, 코딩, 앱">
<meta name="author" content="행운공장">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>
주석
</p>
<p>
주석처리는 어떻게 하는 것인지... 어디에 어떻게 활용되는가...
</p>
</body>
</html>위의 소스가 코딩되어져서, 보여지는 화면은 아래와 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>html_주석처리와 색상코드</title>
<meta charset="UTF-8">
<meta name="description" content="행운공장이 블로그를 하는 사이트">
<meta name="keywords" content="로또예상번호, html, 코딩, 앱">
<meta name="author" content="행운공장">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- 여기는 주석 타이틀 입니다. -->
<p>
주석
</p>
<p>
주석처리는 어떻게 하는 것인지... 어디에 어떻게 활용되는가...
</p>
</body>
</html>분명히, html로 코딩을 했음에도, 그 태그가 주석태그이기때문에, 화면에는 주석태그는 안보이고, 위의 이미지와 동일하게 나타납니다.(주석부분: <!-- 여기는 주석 타이틀 입니다. --> )
특정한 부분을 감추고 싶을때는 2가지 형태를 사용할 수 있습니다. 먼저 태그를 그대로 살려두고, 그 태그의 위와 아랫부분에 주석태그를 시작하고 끝맺음 하는 것입니다. 표현 방식은 아래와 같습니다.(주석부분 : <!--
<p> 주석 </p> -->) 주석이라는 텍스트를 감추기 위해서, 앞뒤로 주석태그를 넣었습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>html_주석처리와 색상코드</title>
<meta charset="UTF-8">
<meta name="description" content="행운공장이 블로그를 하는 사이트">
<meta name="keywords" content="로또예상번호, html, 코딩, 앱">
<meta name="author" content="행운공장">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- 여기는 주석 타이틀 입니다. -->
<!--
<p>
주석
</p>
-->
<p>
주석처리는 어떻게 하는 것인지... 어디에 어떻게 활용되는가...
</p>
</body>
</html>위의 태그는 아래와 같이 화면에 나타납니다. 분명히 코딩된 쏘스는 있는데 주석으로 인해서, <p>주석</p>은 화면에서 사라집니다.
코드를 직접적으로 감추는 두번째 방법은, 코드의 외부에 주석코드를 넣는것이 아닌, 직접 코드에 넣는 방식입니다. 아래 화면에 "<!-- p> 주석 </p -->"을 유심히 보시면, 바로 위에 코드쏘스와 차이점을 발견할 수 있습니다. 이번 쏘스는 별도로 <p>태그 위아래로 주석을 넣는 것이 아닌, <p>태그에 직접 "<!-- p> 주석 </p -->" 이런 방식으로 넣었습니다. 화면에는 위에 별도로 주석넣는 방식과 동일하게 보여집니다. 작업하다 보면, 이 방식이 많이 쓰여집니다. 하지만, 다른 사람들과 협업할때는 코멘트를 따로 달아주는 것이 좋습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>html_주석처리와 색상코드</title>
<meta charset="UTF-8">
<meta name="description" content="행운공장이 블로그를 하는 사이트">
<meta name="keywords" content="로또예상번호, html, 코딩, 앱">
<meta name="author" content="행운공장">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- 여기는 주석 타이틀 입니다. -->
<!-- p>
주석
</p -->
<p>
주석처리는 어떻게 하는 것인지... 어디에 어떻게 활용되는가...
</p>
</body>
</html>
※ 주의사항 : 회사에 작업할때는, 주로 쇼핑몰 솔루션의 html코드를 많이 접하게 됩니다. 물론 100% 코딩으로만 이루어진 html과 언어쏘스들을 접하는 프로그래머분들도 많이 있습니다. 주석은 html뿐만, 아니라, 다른 언어에도 쓰이는데, 각 언어마다 주석을 표현하는 방식은 다릅니다.
이번 포스팅에서는 주석이라는 태그를 설명하기 위해서 간단하게 표현하였지만, 실제 작업환경에서는 화면에서 확실하게 감추어 지는지를 반드시 확인을 하고, 일을 진행해야 합니다. 필자가 과거에 확인도 안하고, 주석처리를 막연하게 진행했다가, 실수를 몇번 한적이 있기때문에 노파심에서 전달하는 것입니다. 특히 쇼핑몰 솔루션에서는 순수하게 html로만 태그들이 구성되어져 있는것이 아니라서, 더욱 신경써야 합니다. 그래도 요즘은 쇼핑몰 솔루션도 모듈화가 많이 되어 있어서, 코딩을 조금만 알고 있어도 수정이 가능하게 되어있습니다.
● 색상코드
코딩에서 색상을 표현하는 방식은 여러가지가 있습니다. 그중에서 가장 많이 사용되는 표현방식에는 몇가지가 있습니다. 첫번째로는 텍스트로 직접 "red"처럼 입력하는 방식입니다. 두번째로는 rgb의 값을 수치로 "rgb(255,0,0)"처럼 표현하는 방식입니다. 세번째로는 16진수 표현방식인 HEX코드의 방법인데, 앞에 #을 써주고 rgb를 각각 2자리씩 표현합니다. 예를 들면, #FF0000는 레드색상이고, #0000FF는 블루색상입니다. 태그에 표현할때는 스타일시트로 표현하는데, 가장 대표적으로 많이 쓰이는 것은 "background-color"와 "color"입니다. 코드상에서의 직접적인 표현방식은 아래 코드를 참고해 주세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>html_주석처리와 색상코드</title>
<meta charset="UTF-8">
<meta name="description" content="행운공장이 블로그를 하는 사이트">
<meta name="keywords" content="로또예상번호, html, 코딩, 앱">
<meta name="author" content="행운공장">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="background-color:#777777;">
<!-- 색상코드 -->
<h4 style="color:#ff0000;">빨강</h4>
<h4 style="color:#00ff00;">그린</h4>
<h4 style="color:#0000ff;">블루</h4>
<h4 style="color:#ffffff;">흰색</h4>
<h4 style="color:#aaaaaa;">회색</h4>
<h4 style="color:#000000;">검정</h4>
</body>
</html>위의 코드는 화면에서 아래와 같이 보여집니다.
위의 코드에서는 HEX코드로만 표현하였지만, 각자 코딩하는 분들이 하고 싶은 방식대로 rgb코드와 이름을 직적 글씨로 써서 표현해도 됩니다. 단, rgb표현방식과 HEX코드 표현방식은 다양한 색상을 수치로 표현할 수 있지만, 글씨로 직접 쓰는것은 이미 정해져 있는 색상이름 이외것은 화면에 나타나지 않습니다. 아래는 input태그에 있는 Color Picker기능입니다. 색상을 선택해서 표현하고 싶은 칼라를 선택하고, 그에 맞는 코드를 찾아서 코딩할때 스타일에 활용해 보세요.
위의 Color Picker 사용법은 아래와 같습니다.
1. 먼저 "색상을 선택해서 코드를 복사하고 활용해 보세요"라는 문구 옆의 네모난 빨강을 클릭합니다.
2. 빨간 네모를 클릭하면, 색상을 선택할 수 있는 팝업이 보여집니다.
3. 팝업에서 맨아랫부분에 있는 색상표현방식을 클릭해서, 원하는 방식으로 바꾸고, 코드와 숫자를 참고하면 됩니다.
'코딩' 카테고리의 다른 글
| html_li_ul_ol_태그 (0) | 2020.10.14 |
|---|---|
| html_링크 태그_target (0) | 2020.10.09 |
| html_b_strong_ins(텍스트 표현 서식들) (0) | 2020.09.21 |
| html_br_img_alt (0) | 2020.09.02 |
| html_h1_h6_p (0) | 2020.08.26 |
