Extra Shot

지난 포스팅에서는 기본적인 스타일 작성법에 대해 알아보았습니다. 어떤 태그에 대해 공통적인 스타일을 작성하는 법은 알았는데, 어떤 div에는 이런 스타일을 적용하고, 다른 div에는 저런 스타일을 적용하고 싶다면 어떻게 해야할까요? 인라인 형식으로 한땀한땀 적용시켜주는 방식도 있겠지만, 개발자들은 훨씬 더 간편한 방법을 만들어냈습니다. 바로 id와 class 라는 선택자입니다. html 태그에 id나 class 값을 부여하고 css에서 해당 선택자를 불러와서 스타일링을 하는 방식으로 사용됩니다. 내용 이런식으로 지정하는데요 한개의 태그에 id와 class를 동시에 적용할 수 있다는것을 알 수 있습니다. 이제 각 요소를 구분하거나 선택하는 방법에 대해 알아봅시다 id 아이디는 한 페이지에서 단 한개의 요소..

html 태그를 작성하는것 만으로는 웹페이지를 원하는 모양으로 웹페이지를 꾸미기가 어렵습니다. 그것을 도와주기 위해 존재하는것이 바로 css입니다. Cascading Style Sheet의 약자로 스타일시트라고도 흔히 부르는데 웹 코딩 얘기 할때 스타일이 어쩌구 하면 대충 다 css얘기라고 생각하시면 됩니다.(아마) css의 대표적인 특징이라면 'cascading'의 의미에 있는 '위에서 아래로 내려온다'는 속성이 있습니다. 무슨 뜻이냐 하면 스타일시트에 적은 내용은 브라우저가 위에서부터 아래로 순서대로 읽어내려가기 때문에 위에서 적용된 스타일을 아래서 무효화시키고 변경시킬 수 있다는 뜻입니다. 예를들면 p 태그에 대한 스타일로 폰트 사이즈를 13px로 적었다고 합시다. 그리고 2번 라인에 똑같은 p에 ..

이번에는 문자를 꾸며주는 인라인 태그들과 약간의 특수성을 가진 태그들에 대해 알아봅시다. *인라인이 뭔데? 라고 생각 하시는 분들은 먼저 이쪽☞[웹코딩의 기초] inline? block? 요소가 가지는 기본속성 - display 의 인라인 버전이라고 생각하시면 좋습니다. 어떤 작은 구간을 나누는데 사용합니다. 블록요소인 와는 달리 어떤 문장의 일부만 색상을 변경한다던지 등의 역할을 할 수 있습니다. 스타일을 지정하기 전까지는 아무런 변화도 나타나지 않습니다. 원래는 글꼴을 이탤릭(기울임)체로 만들기 위해 존재하던 태그였습니다만 모든 태그에는 단순히 문자를 꾸미는것을 넘어 어떠한 의미가 필요하기 때문에 의미가 부여된 태그중에 하나입니다. 'idiomatic text element' 라고 명명되어있으며 문장..

이번에 알려드릴 태그는 태그입니다 이것도 에디터에서 생성할수 있는 기능이 있는데 이 테이블의 기본 구조에 대해서 알아봅시다 테이블 태그는 아마 2000년대 초반이나 그보다 더 과거에 html 코딩을 해본적이 있으신 분들이라면 매우 익숙한 태그일거라고 생각됩니다. 현재는 테이블로 레이아웃을 짜는것이 금지(?)되어있습니다만 과거에는 다들 테이블 코딩을 했었죠 지금은 그렇게 안하는 가장 큰 이유는 표가 가지는 특성이 있고 이 뜻을 해치는 사용법을 지양하고있기 때문입니다. 예전에는 테이블태그 안에 들어가는 태그로 ,, 정도가 있었는데 지금은 더 복잡해져서 여기에 추가된 태그에 대해 이야기하고 구조를 설명해 보도록 하겠습니다. 먼저 기본 구조(필수로 들어가야하는 구성)를 확인해봅시다 표 한 칸 이렇게가 기본 구조..

이번 포스팅은 와 사용법에 대해 알아보려고 합니다. 목록을 나타내는 태그는 특정 규칙을 따라 작성해야 하기 때문에 외워두시는 것을 추천합니다. 사실 외우지 않으셔도 검색하면 나오긴 하지만 이런 규칙이 있다는 정도는 알아주세요. 이 목록 태그들은 에디터에서 기본적으로 제공되고있는 기능에도 포함되어있어서 보기에 친숙할수도 있겠습니다 (

사실 태그는 css로 꾸며주기 전까지는 실제로 웹상에서 봤을때 어디서부터 어디까지가 어떤 태그로 구성되어있는지 대부분은 알기 어렵습니다. 하지만 시각적으로는 확인할수 없더라도 우리는 언제나 용도에 어울리는 태그를 사용하려 노력해야 합니다. 어떤 태그를 썼냐에 따라 웹에서 검색했을때 유의미한 차이를 만들기도 하지만 시각적으로 웹을 볼 수 없는 사람들에게도 아주 중요한 정보를 제공하기 때문입니다. 비유를 하자면 영상에 삽입된 자막과 비슷한 역할을 합니다. 이렇게 말하는 저도 모든 태그를 적재적소에 쓰지는 않고 게으름을 피우곤 하지만.. 태그의 종류가 너무 많기 때문에 전부 다 설명하지는 않고 자주 쓰이는 것들 위주로 설명 해보려 합니다. 이번 포스팅에서는 에 대해 설명합니다. 'division'의 약자입니다..

display 속성은 css에서 따로 지정하지 않아도 기본적으로 요소가 가지는 기본 속성중에 하나입니다. 크게 inline과 block 속성이 있고 일부 전용 특수 속성이 있습니다(예: table이 가지는 자식요소들) 그 외에는 대체로 인위적으로 주는 속성이라 할 수 있고 이 기본적으로 주어진 속성은 css로 덮어씌울 수도 있습니다. 일단 가장 기본적인 두가지 속성에 대해 먼저 알아봅시다 inline 요소 인라인 요소는 말그대로 선 위에 놓여있는 것 같은 형태를 띕니다. 선 위에 있기 때문에 높이나 너비와 관련된 다른 속성값을 가질 수 없으며 정렬도 할 수 없습니다. 지정하더라도 해당 속성을 무시합니다. (width, height, line-height, text-align 등등) 인라인 요소만으로는 정..

이번 포스팅은 웹을 구성하는데 있어 가장 기초가 되는 에 대한 기초중의 기초에 대해 알아보려고 합니다. 먼저 태그란 같이 안에 들어가는 요소들을 말합니다. 태그들은 어디에 어떤 내용이 어떻게 들어갈지에 대한 밑바탕을 제공합니다. 여기부터 여기까지가 어떤 내용이다~ 라는 것을 컴퓨터와 작업하는 사람에게 알려주는 지표라고 생각하면 좋습니다. 여기서 중요한 포인트는 그 어디서부터 어디까지를 표시해야 하기 때문에 거의 모든 태그는 시작하는 태그(연다고 합니다)와 끝맺는 태그(닫는다고 합니다)가 있습니다. 모든 짝이 있는 태그('문단태그'라고도 합니다)의 여닫는 방식은 똑같습니다. div라는 태그로 예를 들자면 가 여는 태그고 (시작태그) 가 닫는 태그입니다. (종료태그) 참 쉽죠? 이렇게 열고 닫은 태그 안에 ..

시작하기 전에(2) 먼저 프로그램 추천을 하려고 합니다. 메모장으로도 코드를 읽을수 있긴 하지만...이건 솔직히 너무 보기 힘드니까요.... 저는 유료 프로그램을 사용하고 있지만 유료 프로그램에도 뒤지지 않는 멋지고 가벼운 프로그램입니다. 이미 많이들 알고 계실지도 모르겠지만 혹시 아직도 메모장을 사용하시는 분이 계시다면 이 프로그램을 받아보시는것을 추천합니다. 단점은..아마도 윈도우에서만 사용 가능하다는 점이 있겠네요..(다른 os 유저분들은 죄송합니다..) 설치 notepad-plus-plus.org/downloads/ Downloads | Notepad++ notepad-plus-plus.org 릴리즈 중에 아무거나 받으셔도 되고 제일 위에 있는게 최신버전입니다. 링크를 누르시면 초록색 버튼이 여러..

사실 플랫폼이나 글 묶는 방식 그리고 연재 주기(?)같은것들에 대해 많은 고민을 했는데요 그냥 있는데다가 생각날때 적당히 가볍게 쓰기로 했습니다. 보시는 분들도 가볍게 볼 수 있는 글이 되었으면 좋겠습니다. 제목(말머리?)도 고민을 많이 했는데..코딩이라고 뭉뚱그려서 써버렸지만 다른 익숙하고도 직관적인 제목이 일단 생각이 나지 않아서..나중에 더 적절한게 생각나면 바꿀지도..모르겠지만 이러다간 생각하다가 내년 될것 같아서 그냥 이렇게 시작합니다(괜찮은 제목 있으면 추천받습니다) 앞으로 이 카테고리에 쓸 글들은 아마도 어떤 분들에게는 여전히 무슨뜻인지 이해하기 어려울 수도 있고, 어떤 분들에게는 이미 다 아는 내용이라 별로 도움이 되지 않을 수도 있습니다. 하지만 한번쯤 메모장(혹은 뭐든 파일을 열수있는 ..