제목이 조금 유치한 것 같습니다. 그런데 말이죠. 저의 처음이 딱 그랬습니다. 원하는 기능은 뚜렷한데 어떤 것으로 해야하는지 알 수가 없었습니다. 기본 개념이 없기도 했고, 따로 모두 공부하려니 엄두가 안나기도 했습니다. 단순히 원하는 거 하나만 적용하길 바랬거든요. 아마 욕심이 아니었나 생각합니다.
결국, 모든 것을 적당히는 알아야 구분하고 적용할 수 있다는 것을 알았습니다. 음, 그렇다고 웹개발자가 되기 위한 깊이 있는 학습으로 이어진 것은 아닙니다. 아주 가볍게 블로그 혹은 사이트를 운영할 때 필요한 정도의 지식만 쌓으면 됩니다. 그 다음부터는 폭풍 검색을 하시면 되죠.
인터넷에는 마음 넓은 능력자들이 많습니다. 이들은 기능을 구현하는 코드에 대한 체계적이고 구체적인 내용을 공유하고 있습니다. 한글문서가 없다면, 영어문서를 찾으면 됩니다. 이제 문서에서 언어는 장벽이 아니지 않을까 생각합니다.
기능을 구현하고 싶어요.
다른 사람 블로그를 구경하다보면 신기한 기능들을 많이 보게 됩니다. 멋진 디자인도 모게 됩니다. 먼가 특별해 보이기도 합니다. 그리고 생각합니다. 자신의 블로그가 초라해 보인다고 말이죠. 절대 그렇지는 않습니다. 단언하건데 그저 다를 뿐입니다. 필요한 기능은 가져와 넣으면 되니까요.
그럼, 어떻게 그런 기능들을 찾는지 알아야 합니다. 여기서 중요한 것이 바로 키워드입니다. 만약, 마우스를 올려서 요소가 변경이 된다면 hover라는 css 명령어를 알아야 합니다. hover의 다양한 디자인 요소들을 찾아보면 원하는 기능을 찾을 수 있을테니까요.
움직이는 모습을 원한다면 [css 애니메이션]으로 검색해볼 수 있습니다. 생각보다 다양하지만, 하나 구현하는데 조금 복잡해 보이기도 합니다.
또는, 먼가 양방향 통신 또는 자동으로 처리하는 기능을 추가하고 싶다면 javascript, jqurey에서 찾으면 됩니다. 예를 들어, 목차가 있습니다. h태그를 이용해 글을 작성하면 원하는 위치에 자동으로 목차를 생성합니다. 신기하죠. 이 목차는 html, css, javascript를 이용한 기능입니다. 자동이죠.
이렇듯 원하는 내용을 찾아야 합니다. 찾기 위해서는 관련 키워드를 알아두면 도움이 될 수 밖에 없습니다. 그럼, 어떻게 찾을 수 있을가요. 간단한 팁은 [개발자 도구]를 사용하는 것입니다.
- 브라우저 개발자 도구
- 과거에는 크롬 개발자 도구를 많이 언급했는데, 거의 모든 브라우저에서 개발자 도구를 지원하고 있습니다.
- 전문가는 아니기에 크롬 개발자 도구의 장점에 대해서는 잘 모르겠습니다. 단지, 개발자 도구를 사용할 수 있으면 그만이라는 생각을 합니다.
- 간혹, 개발자 도구를 막아둔 사이트도 있습니다. 이런 경우, 꼭 필요하지 않다면 굳이 뚫으려 하지 않는게 서로에게 매너가 아닐까 생각합니다.
- 개발자도구 사용 방법
- 간략하게 사용 방법을 살펴봅니다.
- [크롬]을 이용할게요. 기본적으로 요소를 찾는 방법은 모두 비슷합니다.
- 단축키 : f12, ctrl + shift + c, ctrl + shift + j 등
- 손쉽게 f12를 추천합니다. 개발자 도구에도 여러 창이 있습니다. 그 창에 해당되는 단축키들이 있으니 여러 단축키를 알려주는 경우도 있습니다. 그냥, f12로 편하게 사용하실 것을 추천하며, 단축키가 불편하다면 [설정]메뉴를 통해 개발자도구를 열어볼 수 있습니다.
- 페이지의 특정 요소 찾는 방법.
- 이게 본론이죠. 개발자 도구를 통해 페이지의 특정 요소를 찾는 2가지 방법이 있습니다.
- ① 개발자 도구 화면에서 태그를 선택
- ② 페이지 화면에서 요소를 서택
- 둘 다 특정 요소의 태그와 스타일 정보를 확인할 수 있습니다.
- 사진으로 확인하기.
① 개발자 도구 화면에서 태그를 선택
② 페이지 화면에서 요소를 서택
위 두 사진은 블로그를 쓰는 가운데 확인한 모습입니다. 큰 차이는 없죠. 위 사진은 페이지에서 요소를 선택했습니다. 개발자 도구에서 상단 왼쪽에 보시면 페이지 요소를 선택할 수 있는 버튼이 있습니다. 해당 버튼은 사진에서 확인하세요. 두번째 사진은 개발자도구에서 보여지는 html 태그를 선택한 모습입니다. figure 태그를 선택하니 페이지에도 표시되는 것을 확인할 수 있습니다.
이제 이렇게 태그와 요소, 스타일 내용을 확인하는 방법을 알았습니다. 여기서 적당히 정보를 얻을 수 있는데, 가장 핵심이 되는 것은 [키워드]입니다. 명령어 혹은 태그등으로 부를수도 있겠죠. 여기서 얻은 정보를 가지고 폭풍 검색합니다. 물론, 이미 아는 내용이라면 설정된 속성값을 참고하여 자신만의 페이지를 꾸밀 수 있습니다.
html, css, javascript 어떤 경우에 사용하면 될까.
기본적인 지식이 없다면 코드를 보아도 얻을 수 있는 정보는 없습니다. 이게 html인지, css인지, javascript인지를 구분할 수 있어야 정보를 얻고, 찾고, 활용할 수 있는데 말이죠. 그 구분이 안되면 난감하기만 합니다. 그저 비슷한 단어들로 검색을 하게 됩니다. 이런 경우, 잘 찾아지지도 않고, 적용하기도 쉽지 않습니다. 그저 혼란만 가중될 수 있습니다. 저는 그랬거든요. 그래서 간략하게 적어두려 합니다.
- html 부분
- html은 페이지의 기본 골격입니다. 태그 꺽쇠<>로 지정되는 명령어를 뜻합니다.
- 태그도 기본적으로 디자인 요소를 담고 있지만, 가징 기본은 영역을 지정하고, 구분하는 용도라 생각됩니다.
- 레이아웃을 잡는 역할로 많이 사용되며, 링크, 텍스트 영역을 구분하는 용도로 주로 사용되는 것 같습니다.
- 따라서, css요소를 찾아가는 이정표로 활용하면 좋습니다.
- css 부분
- 개발자 도구에서 요소를 선택하면 css 요소에 대한 정보를 얻을 수 있습니다.
- 알고나며, 이게 얼마나 편리한지 느낄 수 있습니다.
- 온라인에서 만들어진 페이지를 수정해볼 수 있습니다. 이 수정은 css 요소의 변화를 통해 원하는 디자인을 찾아가는데 용이합니다.
- css 순서도 확인할 수 있습니다.
- javascript 부분
- 요거는 조금 애매합니다.
- html도 아니고, css도 아닌데 있으면 javascript라고 판단하면 됩니다.
- 사실 비슷한 기능을 구현하는 다양한 방법이 존재하기 때문에 콕 짚는다는 것은 쉽지 않습니다.
- 다만, 위 처럼 생각하는 것이 접근하기 좋은 것 같습니다.
- javascript에서 jqurey 구문을 주로 사용합니다. 따라서, 둘에 대해 기초를 알아두면 코드를 알아보는데 도움이 될 수 있습니다.
마치며.
페이지를 구성하는 방법은 실로 다양합니다. 어떤 웹프로그맹 언어를 사용하는지에 따라서도 달라질 수 있습니다. 여기서 다양하다는 것은 이미 지원되는 기능들이 있을 수 있기 때문이죠. 날 것 그대로에서 만들지 않아도 개인 페이지를 만들 수 있는 경우도 많습니다. 블로그에 적용하기 위해서는 html, css만으로도 충분히 멋진 모습을 만들 수 있을 것입니다.
'It 이야기' 카테고리의 다른 글
| 특정 페이지, 사이트 개발 언어, 프레임 워크가 궁금할 때 사용할 수 있는 방법. (0) | 2022.12.05 |
|---|---|
| 티스토리 블로그 꾸미기 기초 개념, 이 정도는 알고 도전하시면 블로그 꾸미기에 많은 도움이 됩니다. (0) | 2022.12.04 |
댓글