이번에는 html의 기본적인 요소에이어 CSS 선택자에대해서 설명해보려한다. 선택자selector는 html 문서 내부의 특정요소를 선택하는 방법이다. 반드시 작업하는데 있어서는 문서 내부의 특정요소를 선택할 수 있어야된다. 그래야 해당요소에 스타일을 적용하거나 기능을 입힐 수 있기때문이다. 사실상 CSS에서 선택자에는 답이없다는 말이있다. 예를들면 A라는쪽에서 B에게 어떠한 것을 시켰다고 가정해보자, 하지만 B는 그 지시를 그대로 따르지않고 한 가지로 다양하게 풀어 해석을 해보았다. 이러한방식으로 한가지에서 다양한 방법으로 풀어볼 수 있다는 것이다. 결국 실질적으로 다른 프로그래밍 언어에서도 웹의 데이터를 수집할 때 선택자를 많이 사용한다. 따라서 CSS선택자에대해 종류와 정의에대해서 분석할 필요가 있다.
CSS선택자는 무엇인가?
CSS선택자는 특정한 html태그를 선택할 때 사용하는 기능이라는 의미를 가지고있다. 이에 가장 큰 이유는 선택자를 사용하여 특정한 html태그를 선택하면 해당 태그에 우리가 원하는 스타일 또는 기능을 적용할 수 있다는 것이다. 사실상 그냥 일반적으로 레이아웃 및 포멧만 구축하는 것이아니라 원하는 방향과 그대로 구축할 수 있어야 그만큼 더욱 더 가치있는 것이 아닐까 싶다. 그래서 먼저 설명하기에 앞서 CSS블록의 예시를 아래처럼 공유하려한다.
h1{color:red;} 이렇게 CSS블록을 예제로 들어볼 수 있다. 여기서 h1은 선택자를 의미하고 color는 스타일 속성, red는 스타일 값을 의미한다. 이러한 방식으로 짜는 것을 CSS블록이라고 부른다. 이에대한 코드는 style 태그내부에 입력하여 사용하게되는데 이때 style 태그 내부에 입력되는 코드를 스타일시트라고 부른다. 하므로 스타일시트 풀예제를 아래와같이 짜보려한다.
<!DOCTYPE html>
<html>
<head>
<title>CSS3 selector basic</title>
<style>
h1 {
color: red;
background-color: orange;
}
</style>
</head>
<body>
<h1>CSS3 selector basic</h1>
</body>
</html>
따라서 선택자 종류 개요에 대해서 간단하게 알아보려한다. 선택자의 종류에는 이렇게 나열해볼 수 있다. 전체 선택자, 태그 선택자, 아이디 선택자, 클래스 선택자, 후손 선택자, 자손 선택자, 속성 선택자, 동위 선택자, 구조 선택자, 반응 선택자, 상태 선택자, 링크 선택자, 문자 선택자, 부정 선택자 이렇게 구분해볼 수 있다. 이렇게 간략하게 정리해본데이어 구체적으로 선택자 형태와 선택자 예에 관련하여는 하나씩 상세히 보려한다.
전체 선택자란 무엇인가?
html문서 안에있는 모든 태그를 선택할 때는 전체 선택자를 사용한다. 전체 선택자의 예를 들어보면 선택자의 형태는 *, 설명은 html 페이지 내부의 모든 태그를 선택한다. 그러면 전체 선택자에 대해서는 아래처럼 간략하게 코드를 짜볼 수 있겠다.
<!DOCTYPE html>
<html>
<head>
<title>CSS3 selector basic page</title>
<style>
/* 모든 태그의 color 속성에 red 키워드를 적용한다. */
* { color: red; }
</style>
이렇게 일반적으로 전체 선택자를 사용하게되면 body태그내부에 있는 요소에만 스타일 속성이 적용된 것처럼 보인다. 따라서 이렇게 body태그에만 적용되었다고 생각하기 쉬울 수 있기 때문에, head 태그, title 태그, style 태그까지 모두 선택하여 jQuery를 사용하여 적용해야한다. 따라서 전체선택자의 범위는 아래와 같이 정리해볼 수 있다.
이러한 방식으로 간단하게 정리를 해볼 수가 있다. 다음으로는 태그 선택자에대해서 간략하게 설명해보려한다.
태그 선택자는 html 페이지 내부에서 특정 종류의 태그를 모두 선택할 때 사용하게되는 선택자이다. 즉, 간단히 의미를 풀어보면 h1태그의 color 속성에 red키워드를 적용하고 p태그의 color 속성에 blue 키워드를 적용시키는 것이다. 따라서 아래와 같이 정리해볼 수있겠다.
<style>
/* h1태그의 color 속성에 red 키워드를 적용합니다. */
h1 { color: red; }
이런식으로 코드를 입력하면 h1 태그에는 빨간색이 적용되고 p 태그에는 파란색이 적용되는 것을 확인 할 수 있다. 다음으로는 아이디 선택자와 클래스 선택자를 간단히 설명해보려한다. 사실상 이 두가지 선택자는 스타일시트에서 가장 많이 사용되는 선택자이다. 대부분 웹페이지의 레이아웃을 구성하고 디자인을 적용할 때 사용되는 태그이므로 반드시 꼭 숙지해야할 필요가있다.
아이디선택자란 무엇인가?
특정한 id속성을 가지고있는 태그를 선택할 때 사용하는 선택자라고 이해하면 된다. 사실상 웹 표준에 id속성은 웹 페이지 내부에서는 절대 중복되면 안 된다라는 규정이있다. 그래서 아이디 선택자는 특정한 하나의 태그를 선택할 때 사용하는 것이다. 예를들면 선택자의 형태는 이러하다. #아이디, 설명은 아이디 속성을 가지고있는 태그를 선택한다. 아이디 선택자를 적용한 코드의 틀은 이러하다.
<style>
/* id 속성값으로 header를 가지는 태그의 스타일을 지정합니다. */
#header {
with: 400px; margin: 0auto;
background: red;
}
/* id 속성값으로 wrap을 가지는 태그의 스타일을 지정합니다. */
#wrap
이러한 방식으로 여러가지 자료를 조금 더 찾아보며 기본적인 내용을 적용시켜 계속해서 반복해볼 필요가있다. 실질적으로 웹사이트 구축할때 가장많이 사용되는 부분이므로 그냥 넘어가면 안되는 부분이다. 이렇게 아이디 선택자와 클래스 선택자의 심화과정 및 내용을 조금 더하여 나머지 선택자에 관련해서 다음편에서 구체적으로 정리해보려한다.
지금까지 참 다양하고 기본적인 html의 기본태그를 알아보았다. 하지만, 정말 기본적인 태그만으로는 웹자체를 구축하기에는 참으로 많은 어려움이 있을 것이다. 오로지 지금까지 알아본 기본적인 태그를 이용하여 조금 더 응용을 해야 더 멋진 웹사이트가 완성된다고 보면 되는 것이다. 그래서 이번에 정리해볼 내용들은 기본적으로 우리가 인터넷을 할때 로그인하거나 회원가입할때 필요한 부분을 만들어보려한다. 이러한 부분은 보통 개발에있어서 프론트앤드에서 작업하게 되며, 처음으로 다루어볼 내용은 입력 양식 태그라는 것이다. 여기서 입력양식은 사용자에게 입력받는 공간을 의미한다고 보면된다. 정말 가장 대표적인 예로 회원가입 양식을 들어볼 수 있다. 사실상 조금 더 덧붙여서 이야기하자면 입력 양식을 제대로 다루기위해서는 서버와 관련된 모든 기술을 알아야할 필요가있다. 하지만 그러한 영역은 고급적인 영역이라는 부분에있어서 추후에 다시 생각해보려한다. 따라서 먼저 입력양식의 기본/개요에 대해서 알아보려한다. 먼저 나는 form태그를 먼저 설명해볼 것이다. 입력양식은 아래와 동일하게 적용된다고 보면된다.
<body>
<form>
</form>
</body>
여기서 입력양식 안에는 input 태그를 입력하게된다. 하므로 input을 적용하여 간단한 입력양식을 정리해보면 이러하다.
<body>
<form>
<input type="text" name="search" />
<input type="submit" />
</form>
</body>
사실상 이렇게 기본적인 틀만 가지고는 완성본을 직접 확인할 수가 없다. 그리하여 입력양식에 테이터를 입력하고 쿼리 전송버튼을 눌러야만 데이터가 지정된 장소에 지정된방법으로 전달된다고 보면된다. 그러므로 여기에 아래와 같은 태그를 사용하면된다. <action> 전달위치를 지정하게되고 <method> 전달방식을 전달하게되는 특징을 가지고있다. 하지만 여기서 이렇게 간단한 의미만가지고는 사실상 헷갈릴수밖에 없는부분이다. 도대체 데이터가 어디로 어떻게 또는 어떠한 방식으로 전달되는지가 궁금할 수밖에없는 부분인데 예를들면 방금 전에도 언급했다시피 회원가입할때의 양식을 생각해볼 수 있다. 먼저 개인정보를 입력하게되는데 그 후에 회원가입버튼을 누르게되면 서버로 정보가 전달되는데 그냥 단도직입적으로 정리하면 정말 간단하다. "정보는 form태그에 지정된 action속성의 장소/위치로 method속성에 적힌 방식으로 전달되는 원리"이다. 여기서 자주 사용되는 method 속성은 GET/ POST로 나뉠 수 있다고 보면된다.
GET요청은 아래와같이 정리해볼 수 있다.
<body>
<form method="get">
<input type="text" name="search" />
<input type="submit" />
</form>
</body>
POST요청은 GET요청과 비슷하게 단어 하나만 바뀐다고 보면된다.
<body>
<form method="post">
<input type="text" name="search">
<input type="submit" />
</form>
</body>
이렇게 하면 도대체 어떠한결과가 일어날까하고 궁금할 수밖에없을 것이다. 변경된 내용은 rint데이터를 입력했기에 http://localhost:포트번호/폴더이름/파일이름?search=hint형태로 URL이 변경되었을 것이다. GET의 방식은 주소에 데이터를 입력해서 보내는 방식으로 정리할 수 있다. 하지만 POST방식은 주소가 변경되지않는다. 앞서 설명했던 GET의 방식과는 달리 비밀스럽게 데이터를 전달하는 방식을 의미한다.
결론적으로 주소에 데이터를 입력해서 전달했다는 이야기는 GET방식을 적용했다는 의미이다. 이에 이어 기본 input태그를 정리해보려한다. 앞서 언급했던 내용과는 다르게 input태그는 사용자에게 정보를 입력받은 기능을 수행하는 태그라고 보면된다. 즉 간단하게 풀이해보면 사용자에게 글자를 입력받는 것은 물론이고 비밀번호와 파일을 입력받을 수도있다는 부분이다. 기본 input태그가 적용된 간단한 틀도 아래와같이 곁들어볼 수있다.
<body>
<form>
<input type="text" name="name" /><br />
<input type="password" name="password" /><br />
<input type="file" name="file" /><br />
<input type="submit" />
</form>
</body>
여기서 input태그들의 종류를 간단하게 정리해보려한다. <button>태그: 버튼을 생성/ <checkbox>태그: 체크박스 생성/ <file>태그: 파일입력양식 생성/ <hidden>태그: 보이지않음/ <image>태그: 이미지형태 생성/ <password>태그: 비밀번호 입력양식 생성/ <radio>태그: 라디오버튼 생성/ <reset>태그: 초기화버튼 생성/ <submit>태그: 제출버튼 생성/ <text>태그: 글자입력양식 생성이다. 일단 이번 편에는 여기까지 간단하게 내용을 정리해보았다. 이전에 기본태그에이어 조금 더 응용하여 여기까지 응용할 수 있다면 당연히 좋을 수도있겠지만, 사실상 한번에 습득하기에는 조금 어려운 부분이있을 수 있기때문에 꾸준히 VISUAL STUDIO CODE를 이용하여 반복적으로 연습할 필요가 있다고 생각한다.
지금까지 다양한 웹(Web)상에서 접한부분이 있을거라고 생각합니다. 혹시나 테이블 태그라고 들어보셨는지 모르겠습니다만 보통 표 형식의 문서를 만들 때 사용하게되는 태그이다. 과거에는 사실 테이블 태그를 사용하여 레이아웃(Layout)도 구성하곤 하였는데 반면에 요즘 현대에는 웹 페이지 대부분은 <div>태그를 사용하여 사용빈도가 극도로 높습니다. 테이블 태그의 기본을 먼저 간략하게 공유하자면, 거의 모든 대부분의 데이터중에 표 형식으로 된 자료들은 테이블 태그를 사용합니다. 예를들면 아래와같이 만들어 볼 수 있다.
<body>
<table>
</table>
</body>
일단 기본적으로 뼈대를 만들어놓았다만 여기서 <table></table>태그사이에 실제로 무슨 내용이들어갈지 지정되지않았다. 그 안에 넣을 수 있는 태그는 사실상 다양하지만 실질적으로 실무에서 혹은 웹상에서 많이 쓰이는 태그를 정리 및 나열해본다. tr/ 표 내부의 행 태그, th/ 표 내부의 제목 셀 태그, td/ 행 내부의 일반 셀 태그를 의미한다. 하지만 이렇게 그냥 단순히 보고 암기하는 것 보다는 조금 더 세부적으로 알면 조금 더 정확한 의미를 이해할 수 있어 좋다. 먼저 tr태그는 table row를 의미하고, th태그는 table header, td태그는 table data를 의미한다. 전체적인 의미를 알고 아무래도 주기적으로 연습해보는 것이 백만번 유용할 것같다고 생각하는 부분이다. 그렇게하여 조금 더 응용하여 태그를 만들어보자면 아래와 동일하다.
<body>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 1</td>
</tr>
<tr>
<td>Data 2</td>
<td>Data 2</td>
</tr>
</table>
</body>
이렇게 만들어볼 수 있다. 물론 처음이라면 어렵고 복잡할 수 있는 부분인데 앞전에 HTML5에 필요한 기본적인 태그를 숙지하였다면 이번에 새로 등장한 태그를 알고 원리를 알면 조금 더 확실하게 알 수있는 부분이다. 특히나 코드에 보면 table border이라는 부분은 표의 테두리 두께를 지정해주는 부분이다. 게다가 여기서 조금 더 응용하자면 rowspan과 colspan을 추가로 들어볼 수 있다. rowspan은 셀의 높이를 지정하는 태그이고 colspan은 셀의 너비를 지정하는 태그이다. 앞전에 span이라는 태그를 들어본 적이있을지도 모른다. 하지만 앞에 col 또는 row를 붙이면 이와같은 태그가 만들어진다. 여기서 조금 더 응용하면 더 다양한 표의 형식을 만들어볼 수 있을것인데 그 부분은 추후 다시한번 연습해보도록 할 예정이다. 그리고 다음으로 또 보게되었던 내용은 이미지 태그이다.
이미지 태그
사실상 지금까지 쭉 확인해본 내용들은 너무 기본적인 태그들이다. 이러한 기본적인 태그들로는 사실 조금 익히기에 복잡할 수 있고 한번에 숙지하기가 어려운 부분도 있을것이라고 생각한다. 그래서 이번에는 비주얼적으로 조금 달리보이는 이미지 태그를 설명하고자한다. 이미지태그는 img라는 태그를 사용한다. 하지만 단순히 그냥 img라는 태그만 넣는다면 아무런 변화가 없지않을까라고 자연스럽게 생각해보게된다. 정답은 맞다. 일단 img라는 속성을 넣기에는 아래와 같이 기본적인 뼈대를 만들어준다. 물론 당연히 <body>및 중간 내용에 들어가기에 이 영역 안에 넣어보겠다.
<body>
<img />
</body>
여기서 이미지를 넣게되는 방법은 img태그와 연관성있는 속성이다. 무수히 많은 속성이 있지만, 이번에는 4가지 속성을 넣어보려한다. <src>, <alt>, <width>, <height> 이렇게 4가지이다. 먼저 <src>는 이미지의 경로를 지정해주는 역할을 한다. 다음으로 <alt>는 이미지가 없을 때 나오는 글자를 지정해주고, <width>는 이미지의 너비지정, <height> 이미지의 높이를 지정해주는 역할을 한다. 하지만 요즘 현대시대에는 스타일시트를 사용해 입력하는 것이 기본적이므로 width와 height의 속성은 잘 사용하지않습니다. 예를들어 img 태그의 속성에 관한 뼈대를 만들어보겠습니다. 그리고 다음으로 이어질 내용은 오디오 태그입니다.
<body>
<img src="iris.jpg" alt="홍채" with="200" />
<img src="nothing" alt="그림이 존재하지 않습니다." width="500" />
</body>
오디오 태그
오디오 태그는 사실상 일반적으로 너무 많이 쓰이는 부분이라 추가적으로 정리해볼 필요는 딱히 없을것으로 보입니다. 대체적으로 대부분의 많은 사람들은 인터넷을 통하여 웹 브라우저에서 음악을 재생하고 듣곤하는데, 이를 재생할 수 있게 만들어주는 태그가 오디오 태그입니다. 이는 img태그와 사용방법이 매우 비슷하므로 정말 쉽게 사용할 수 있을 것입니다. 우선 일단 mp3파일을 준비해주고 아래와같이 기본 태그를 만들어봅니다.
<body>
<audio></audio>
</body>
여기서도 위에서 언급했던 img태그와 마찬가지로 오디오 태그도 입력은 먼저 하긴했지만 어떠한 음악을 어떤 방식으로 재생하게할지 정해지지 않았습니다. 여기서 또 한가지 짚고 넘어가야할 부분은 이전과 마찬가지로 몇가지 관련 속성입니다. <src>, <preload>, <autoplay>, <loop>, <controls> 이렇게 곱아볼 수 있는데 하나씩 태그를 간략하게 풀이해보면 이렇습니다. <src>는 음악파일의 경로를 지정, <preload>는 음악을 재생하기 전에 모두 불러올지 지정, <autoplay> 음악을 자동으로 재생할지 지정, <loop> 음악을 반복할지 지정, <controls> 음악 재생도구를 출력할지 지정해주는 부분입니다. 사실상 이 모든 부분은 음악을 재생할때 모두 다 사용되는 부분이기때문에 반드시 알아야할 필요가 있다고 생각한다. 예제로 아래와같이 만들어볼 수 있다. 이렇게 코드를 만들어 실행을 하면 직접 음악을 재생할 수 있다.
앵커태그란 서로 다른 웹페이지 사이를 이동하거나 웹 페이지 내부에서 특정한 위치로 이동할 때 주로 사용되는 태그이다. 태그명(Tag Name)은 a로 표기되며 앵커태그라고 불린다. 여기서 a만 삽입한다고해서 앵커태그의 기능이 발효되는 것은 아니다. 여기서 웹(Web)상 작동이 가능하게 하려면 href라는 속성을 사용하여 이동하고자 하는 웹 페이지를 별도로 지정해주어야 정상적으로 작동하게된다. 따라서 예를들어보자면 아래와같이 예시작을 들어볼 수 있다. 이렇게 코드를 실행한 후 a 태그를 클릭하게되면 지정한 웹 페이지로 이동하게 되는 원리이다. 하지만 웹 표준을 지키면서 이동하지 않는 a 태그를 새로 만들때에는 href속성에 #를 입력해주어야하고 예시는 아래와 동등하다.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1 id="logout">Logout</h1>
<p>Duis nec risus a ante pellentesque.</p>
<h1 id="source">Source</h1>
<nullam prota, felis sit amet porttitor vestibulum.</p>
</body>
예를들어 페이지 내부에서 이동한다는 원리는 아래와 같이 짜여질수 있다. 이러한 방식은 기본적으로 일반 웹사이트에서 많이 사용되어지고 있다. 특히, 아래에 id속성이 중복이되면 먼저 나오는 태그로 이동하게되는 형식이다. 이에 따라서 또 개발을 하는데 꼭 필요한 부분은 글자형태태그를 사용하여 글자에 형태와 의미를 부여할 수 있다는 부분이다. 일단 먼저 설명하기에 앞서 여럿 태그가 있어 정리를 해보려한다.
b/ 굵은글자태그, i/ 기울어진 글자태그, small/ 작은글자태그, sub/ 아래에 달라붙는 태그, sup/ 위에 달라붙는태그, ins/ 밑줄 글자태그, del/ 가운데 줄이 그어진 글자태그가 있다.
<body>
<h1><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b></h1>
<h1><i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</i></h1>
<h1><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small></h1>
<h1><sub>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sub></h1>
<h1><sup>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sup></h1>
<h1><ins>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</ins></h1>
<h1><del>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</del></h1>
<hr />
루비문자(Ruby Text)
루비문자는 일본어에서 자주 사용되는 문자라고 한다. 태그는 총 3가지로 나뉘어지며, 아래와같이 정리해볼 수 있다.
