이번에는 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
이러한 방식으로 여러가지 자료를 조금 더 찾아보며 기본적인 내용을 적용시켜 계속해서 반복해볼 필요가있다. 실질적으로 웹사이트 구축할때 가장많이 사용되는 부분이므로 그냥 넘어가면 안되는 부분이다. 이렇게 아이디 선택자와 클래스 선택자의 심화과정 및 내용을 조금 더하여 나머지 선택자에 관련해서 다음편에서 구체적으로 정리해보려한다.
IT산업이 빠른속도로 점점 발전하면서 자동차 디자인/산업에도 엄청나게 큰 영향을 미치고있다. 사실상 내가 미국에있었을때 한 때 로스엔젤레스(Los Angeles)에 놀러가서 부가티를 본적이 있다. 보자마자, 정말 이건 무슨 스포츠카인가 싶어서 막 검색을 하고 찾아보았던 적이있었다. 아무리봐도 디자인도 너무이쁘고 멋스러움 그자체였기 때문이다. 하지만, 이 자동차의 금액은 정말 상상초월을 하기때문에 왠만큼 부자아니고서는 손에 거머쥐기가 쉽지않은 자동차로 이미 벌써부터 널리 알려져있다. 부가티의 전반적인 디자인의 탄생은 이탈리아 밀라노 탄생의 프랑스인 에토레 부가티가 자신의 이름으로부터 따온 것이며 프랑스의 최고급 수공 자동차 제조사 브랜드로 자리를 잡게되면서 시작이되었다. 현재 부가티의 본사는 프랑스의 소도시인 몰샤임이라는 곳에 위치해있다.
이렇게 에토레 부가티가 설립한 자동차회사로 알려져있고 이미 자동차에 많은 관심이 있는 사람들은 대부분 다 알것이라고 생각한다. 부가티는 이전에 독보적인 최고급 차량을 생산하기 시작하였으나 이러한 문제는 제대로 진행되지못하였다. 그 이유는 시장의 큰 흐름을 파악하지못하고 무턱대고 달려왔기 때문이다. 오로지 비싸고 사치스러운 모델만 판매하였을때 결과물은 어떠한그림이 나왔을지 그것이 바로 문제인것같다. 그래서 그러한 문제를 깨닫고 현재는 폭스바겐 그룹 산하 회사이며, 오로지 공장에서는 조립만한다. 그리고 핵심부품의 경우에는 독일 폭스바겐 공장에서 제작한 부품을 가져다 쓴다고 알려져있다.
이렇게 달려온 부가티, 시간이지나고 어떤 영향을 이 사회에 미치고있었을지 그저 의문이 들수도있다. 때는 2014년 12월 중순, 네이버캐스트에서 "과잉의 역사"라는 제목으로 소개된적이있다. 부가티는 정말 자동차에 많은 관심이있고 이전부터 부가티라는 자동차를 알았던 사람들이라면 당연히 알 것이다. 부가티의 역사는 지나치게 강력할뿐만아니라 고급스럽고 모든부품이 비싼점으로 이미 메겨진 것이다. 오죽하면 현재에도 클래식 카 경매시장에 가보면 그 많은 자동차중에 최고가로 나온 부가티를 만나볼 수 있다. 예를들면 Type 57SC Altantic이라는 모델은 약 3,000만 달러에 판매된 적이있다. 한화로 계산해보았을때 약 360만억원 이라는 단위로 계산해볼수있다. 이렇게 경매시장에나와도 이미 이 영역에 깊게 홀릭된 사람들은 당연히 달려들 것이라고 생각한다.
그리고 현존하는 가장 비싼 클래식 카 중 하나인 1938 부가티 타임57S(+C)를 예로 들어볼 수 있다. 이는 에토레 부가티의 장남인 장 부가티가 직접 디자인하였다고한다. 하지만, 단 4대만 제작되었고 그 중에 한대는 장 부가티가 직접 소유하였다. 하지만, 어느날 2차 세계대전 중 사라져 현재는 3대만 소유하고있다고한다.
정말 부가티가 어쩌다가 이렇게 최고가의 금액을 자랑하는 자동차로 남게되었을까? 일단 가장 큰 이유는 부가티의 모든 차량은 직접 손으로 일일히 제작되었다는 부분인것같다. 일반적으로 물건을 구매하더라도 직접 만들어진 수제는 더 비싸지아니한가? 이렇게하여 부가티는 정말 엄청나게 뛰어난 품질과 성능으로 자랑하였으며 전세계의 왕족과 부유층을 주로 타겟으로 하였다.
부가티의 차량은 또 메리트가 있을 수 밖에없다고 생각한다. 가장 큰 이유는 까다로운 심사를 일일히 다 거쳐서 만들어진다는 점이다. 먼저 부가티의 자체 심의통과를 진행하게되는데, 여기서 심의란 고객이 진정으로 부가티를 소유할 수 있는지 자격을 여러면에서 확인해보는 것이다. 여기서 바로 예를들면 경제적인면을 들어볼 수 있다. 하지만 이전에 소유하였던 사람들은 기본적으로 자동차 40대이상과 항공기 2대이상 요트도 몇대이상을 기본적으로 소유하였던 사람들로 파악되었다. 그 다음으로는 부가티의 역사 수업강습 및 부가티 엔지니어 설명강습이다. 물론 부가티를 운영 및 관리를 하는 차원에대해서는 조금 더 전문적인 차체에대한 지식을 가지고 유지해야할 필요가있다고본다. 그 다음으로는 테스트 드라이브 및 구매의사 결정, 계약금 지불이다. 먼저 이 테스트는 구매자가 직접 테스트 트랙에서 운전을 해보아야하며 그 테스트를 확실하게 통과하여야지만 거머쥘 수 있는 것이다. 따라서 모든 부분이 결정이되었다면 계약금을 지불하게되는데 첫 계약금은 약 3억원이라고한다. 이렇게 최종의 단계까지 총 3번의 계약금을 지불해야한다고 알려져있다. 마지막으로 차량옵션선택과 차량인수이다. 구입하기로 최종적으로 결정이되었으면 이제 옵션을 선택하고 인수를 받으면되는데 옵션의경우 한가지만 바꾼다해도 몇천만원의 고액이 왔다갔다한다고 한다.
현대사회에있어서 사실상 와이파이(wifi)를 전세계적으로 사용하고있다는 부분은 당연한 것이다. 기본적으로 이전에는 케이블을 연결하여 직접 인터넷을 사용하곤 하였다. 물론 이렇게하면 인터넷을 사용중에 신호가 끊기는 일이 거의없고 더욱 더 정확하게 사용할 수 있다. 하지만, 외부에서 인터넷을 사용할 시 참 많은 어려움이 따를 수 있었다. 이렇게 전반적인 빠른 기술의 발전으로 모든 인구는 통신매개체를 이용하기위해 와이파이를 대부분 사용하고 있다는점이다. 이렇게하여 이번에는 와이파이의 역사게 유래되었고, 누구로부터 발명되었으며 그 밖의 모든 정의들을 간단하게 정리해보고자한다.
세계적인 와이파이(wifi)의 역사 및 발명가
헤디라마는 와이파의 선구자 및 발명가다. 헤디라마는 2913년 오스트리아 빈에서 태어났고 그녀는 어렸을때부터 발명에 뛰어난 재능이있었다. 그녀는 와이파이를 발명하게된 이유는 사실상 따로있었다. 해저전투에서 꼭 필요했던 주파수도약기술을 만들어봐야겠다는 생각이 머릿속을 떠나지않았다. 발명에도 많은 관심이있었을 뿐만아니라 아버지의 영향을 많이받았던 인물이기도하다. 평소에 헤디의 아버지는 여성이 기계에 관심을 가지면 안된다고 하는 편견이 아예 없던 사람이였기에 자동자의 엔진원리를 교육시키기시작하였던 것이다. 결국 이러한 모든 과정들이 지금의 엄청난 세상을 만들게되지 않았을까라는 의문점도든다.
시간을 거슬러올라가 지금으로부터 30년전으로 거슬러올라가본다. 1971년, 알로하넷은 미국의 영토인 하와이제도를 무선 패킷 네트워크와 연결을 하였다. 이는 IEEE프로토콜과 이더넷의 가장 초창기 선구자라고 생각하면된다. 여기서 약 14년이 흐르고 미국연방통신위원회(FCC)로부터 ISM밴드가 출시되었다. 하지만, 여기서 또 다른 이슈가 생기기시작하였다. 이 주파수는 전자레인지와 비슷한 전자제품 및 장비에 사용되는 것과 동일하므로써 주파수 간섭이 발생하기 시작하였다. 그 이후로 현재 반도체 부품업체인 Agere System에 합류하였던 한 인물이 있다. 그의 이름은 'Vic Hayes(와이파이의 아버지)'라고 불리는 인물이다. 와이파이시스템에 참으로 긍정적인 영향을 미칠 수 밖에없었다.
이렇게 시간이 흘러 1985년에 미국 연방 통신위원회로부터 공개된 것은 2.4GHz대역의 주파수가있다. 또 하나의 정의를 정리해보면 와이파이는 또 다르게 정리해볼 수 있다. 이는 보통명사로 Wi-Fi또는 WLAN, 한국과 일본에서는 이를 무선랜이라고 부르기도한다. 와이파이(Wifi)는 현재 모든 사람들은 '와이파이'로 부른다. 하지만 초장기에는 이 단어를 '위피'라고 부르기도하였다. 하지만, 이 단어는 어쩌다 와이파이로 불리게되었을까? 이유는 참 간단했다. 유럽에서 대부분의 언어 i를 '이'로 읽기때문이다. 그리하여 '위피'는 '와이파이'로 불리게되었다. 이는 게다가 무선통신이다보니 유선과 확실하게 구분될 필요가 있었다. 그래서 WLAN가 아니고 WAN(Wireless Area Network)라는 용어가 표준화 되기시작하였다.
한국에서의 와이파이 역사
국내의 경우에는 와이파이를 처음 사용하게되었던 시점이 언제였을까? 2002년 2월 1일에 KT에서 네스팟(와이파이)를 사용한 것이 사실상 처음이다. 이 당시 아이폰이 출시되기전에 UMD를 판매하기 시작하였다. 이는 로그인하는 시스템의 방식으로 진행되었지만, 아이폰4출시 이후부터는 유심으로 비밀번호없이 직접인증하는 방식으로 바뀌기 시작하였다. 어떻게보면 조금 더 간소화, 간편화가 되었다고 볼 수있다. 참 다양한 그래프가 그려졌고 시간이 지나 와이파이(Wifi)가 스마트폰과 다양한 전자제품에 내장되면서 모든 장벽이 한번에 무너지고 모든 시스템이 바뀌기시작하였다. 정말 그때부터는 메신저와, 노트북, 스마트폰 등 모든 부분이 이제 가는 곳마다 장소를 가리지않고 지정된 와이파이를 사용함으로써 다양한 연결고리를 만들 수 있다는 부분이였다. 이로인해 다양하게 사용하며 그만큼 더 빠른 속도로 세상은 돌아갈 수 있었다. 우리는 지금 현재 예를들면 맥도날드나 지하철역 등에서 와이파이를 손 쉽게 사용할 수 있고 심지어는 자동으로 설정을 해놓으면 직접 연결하지않아도 와이파이가 자동으로 연결되는 결과를 확인할 수 있다.
와이파이를 사용할때 쉽게 접하게되는 용어
-라우터(Router): 이는 정말 언제 어디에서나 너무 손쉽게 볼 수 있는 장치이다. 우리가 흔히 불리는 라우터는 곧, 공유기를 의미한다. 여러 데스크탑 및 노트북끼리 와이파이를 통해 인터넷을 연결하고 데이터를 쉽게 전송시킬 수 있게 하는 장치이다.
-모뎀(Modem): 이는 라우터와 아주 비슷한 장치이다. 이는 보통 컴퓨터와 모뎀을 연결하고 이를 또 다른 컴퓨터에 공유하기위하여 위에서 언급했던 라우터를 연결하게되는 방식이다. 무선이아닌 유선의 방식으로 이렇게 사용이 가능하다.
-허브(Hub): 이는 네트워크 신호를 분배해주는 장치로 불린다. 예를들면 인터넷 선이 하나만 깔려있따고해도 여러대의 컴퓨터로 인터넷을 사용하게된다면 허브는 필수로 사용되어져야하는 부분이다.
-메시(Mesh): 여러개의 무선라우터가 하나의 와이파이를 만드는 방식이다. 이는 네트워크ID(SSID)를 공유하고 넓은 공간에 걸쳐 유선네트워크를 사용할 수 있게해준다.
지금까지 참 다양하고 기본적인 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를 이용하여 반복적으로 연습할 필요가 있다고 생각한다.
