html에서 글자를 크게 하거나 꾸며주는 태그, 속성은 대표적으로 font-size, color 등이 있습니다. 그 중 이것을 활용하면 검색엔진에 효과적인 태그입니다. 바로 h 태그입니다. h 태그는 <h1> 부터 <h6> 까지로..
HTML과 CSS는 정적인 언어입니다. 코드를 작성하면 그 코드에 대해서만 화면에 보인다는 뜻입니다. 하지만 javascript는 HTML과 CSS로 만들어진 웹페이지를 동적으로 변경해주는 언어입니다. 즉, 기능을 만드는..
인터넷 신문, 웹사이트 방문 후 뒤로가기를 했을 때 다른 화면이 나오는 것을 확인한 적이 있나요? 필자는 이러한 경험을 여러 번 했었습니다. 특히 모바일로 인터넷 신문을 보고 뒤로가기를 누르면 다른 화면이..
웹 표준이란 웹을 표준화하기 위해 만들어진 기구, W3C가 지정한 표준안을 지켜 웹사이트를 제작하는 것을 말합니다. 그렇다면 왜 모든 웹에 대해서 표준화를 지향하는 것일까요? 웹 표준을 지킨다는 것은 HTML, C..
웹 표준이라는 말을 들어보셨나요? 이 용어는 W3C가 지정한 표준안을 지켜 웹사이트를 제작하는 것을 말합니다. 이렇게 작성하면 어떤 운영체제나 웹 브라우저 상에서도 비교적 같은 디자인과 기능을 구현하는 데..
웹사이트에서 게시판 구조 만드는 방법 "<table> 태그" 웹사이트를 만들게 되면 여러가지 디자인을 할 때 레이아웃을 잡아야 합니다. 과거에는 웹페이지의 전체를 표로 잡아 개발했지만 W3C에서 테이블로 레이아웃..
float 속성은 css에서 정렬하기 위해 사용되는 속성입니다. 이뿐만 아니라, 다단의 레이아웃을 구성할 때, 이미지 슬라이더 등에서도 활용할 수 있습니다. 위 사진과 같이 이미지 옆에 글을 쓸 때에서도 사용할..
제가 만들 커뮤니티 사이트는 IT개발자 Q&A 사이트인 okky를 토대로 사이트를 제작하고자 합니다! 비록 많이 부족하지만 잘 봐주시면 감사하겠습니다! 업데이트는 깃허브에 올릴 예정입니다. github 주소 : https:..
제목처럼 다양한 웹 언어(jsp, spring 등)에서 사용되는 <form> 태그에 대해 알아보겠습니다. <form> 태그는 웹 상에서 많이 사용되는데 사용자에게 무엇인가 입력하여 값을 전달할 때 사용됩니다. 예를 들어보겠..
html5 버전에서는 시맨틱 태그(Semantic Tag) 즉, 의미론적인 태그를 지원합니다. 이것은 있으나 없으나 문서의 모습이나 형태가 변하지 않습니다. 하지만, 유지보수하거나 다른 사람이 이 코드를 봤을 때 한눈에..
css 박스 모델은 홈페이지에서 중요한 요소 중 하나로 뽑히고 있습니다. 구조를 이해한다면 쉽게 사용할 수 있습니다. 좀 더 자세히 어떤 점에서 중요한지 하나씩 알아보겠습니다. 웹 브라우저 크롬으로 알아보는..
저도 그렇지만 많은 사람들은 UI와 UX는 같은 개념으로 생각하고 있습니다. 저의 경우 사용자가 보이는 부분(레이아웃, 폰트 등)을 디자인하는 것으로 알고 있었습니다. 하지만 이 둘 사이에는 차이점이 있고 대등..
위 사진은 네이버를 빨간색 테두리로 구역별로 나눈 것입니다. 상단은 header, 목록은 nav, 뉴스 컨텐츠는 section1, 과학, 법률 등의 목록은 section2, 로그인부분은 aside로 나눴습니다. 네이버를 더 자세히 들..
웹의 아버지라고 불리는 인물 중 한 명인 팀 버너스 리는 인터넷이 소수 독점기업의 지배에 놓이고 있어 이를 바로잡고자 인터넷을 구하기 위해 웹 계획서 원칙을 공개했습니다. 이어 세계 인구의 절반인 40억 명..
html5에서의 a 태그는 하이퍼텍스트 즉, 링크 역할을 하는 태그입니다. 대표적으로 링크의 목적지를 나타내는 속성 href가 있습니다. 부가로 링크 된 문서를 열 때의 위치를 지정하거나 현재 문서와 링크된 문서..
웹 개발자는 크게 프론트엔드와 백엔드 개발자로 구분할 수 있습니다. 뜬금없이 왜 이런 소리를 하는지 궁금해하실 것입니다. 이렇게 구분하는 이유는 서로 같은 웹 개발자지만 하는 일이 달라서입니다. 어떤 일이..
이 블로그를 포함한 많은 웹사이트, 블로그는 반응형 웹을 지원하고 있습니다. 반응형 웹은 무엇일까 생각해봅시다. 반응형 웹은 위 사진에서 보시는 것과 같이 PC, 모바일 등 다양한 기기에 대해서 화면의 크기..
웹사이트를 만들 때 뼈대 역할을 하는 HTML은 많은 태그가 있고 응용할 수 있습니다. 이 말은 자신이 생각한 기능을 대부분 구현할 수 있다는 얘기입니다. 그 중 전 세계 구글 검색 결과에서 수집한 800만 개의 웹..
html과 css는 떼려야 뗄 수 없는 관계입니다. 그건 누구나 다 아는 사실입니다. 그럼 html파일에서 css는 어떻게 써야 할까요? 총 3가지의 방법으로 적용할 수 있습니다. 많이 쓰이는 HTML 태그 간단히 살펴보기 C..
반복하지 말라 제가 웹 개발과 관련된 면접을 볼 때 코딩 실력도 중요하지만 개발자들이 중요하게 생각하는 원칙은 DRY라고 합니다. DRY 원칙이 무엇을까요? 바로 Don't Repeat Yourself, 반복하지 말라입니다. 즉..
프로그래밍 언어에서 주석이란 쉽게 말해 코드에 메모를 남기는 기능입니다. 그래서 주석은 웹 브라우저에서 보이지 않을 뿐만 아니라 검색엔진에도 보이지 않습니다. 그러면 어디서 사용할 수 있을까요? 첫 번째..
자신이 사용하는 웹 브라우저의 수용도 점수를 알고 계신가요? 웹 구성 요소, 반응형 이미지, 연결성 등 많은 평가를 통해 점수로 나타내는 사이트가 있는데 한번 살펴보겠습니다. http://html5test.com/ 저는 크..
html이 웹페이지의 뼈대(틀) 역할을 한다면, css는 웹페이지의 디자인, 레이아웃 등 스타일 역할을 합니다. CSS는 Casting Style Sheets의 약자로 html 요소들이 각종 디자인, 레이아웃 등 사용자에게 어떻게 보여..
이전 글에서는 줄바꿈 기능을 하는 br 태그와 단락을 나누는 p 태그 즉, 기능이 있는 태그에 대해 알아보았습니다. 이와 반대로 div 태그와 span 태그는 의미가 없는 것이 특징인데 영역을 나눌 때 사용합니다. p..
코드상에서 글을 쓸 때 아무리 줄바꿈을 해도 단락을 바꿔봐도 웹 브라우저에서는 한 줄로 보이는 경험을 해보셨을 것입니다. 그렇다면 어떻게 해야 한 줄이 아닌 사용자가 원하는 대로 텍스트를 나눌 수 있을까요..
html에서 a 태그를 써서 링크를 만들 수 있고 img 태그를 써서 이미지를 불러올 수 있습니다. 또한, 이 두 개의 태그를 섞어서 이미지를 클릭했을 때 다른 페이지로 이동할 수 있습니다. 즉, 중첩하여 사용자에게..
웹은 클라이언트와 서버라는 체계 안에서 동작합니다. 따라서 웹과 관련된 개발자들은 이 체계를 이해하셔야 합니다. 그렇다면 클라이언트와 서버는 서로 어떤 의미가 있는지 어떻게 동작하게 되는지 알아보도록..
구글에서 서비스되고 있는 웹 브라우저 크롬이 10월 16일에 버전 70에 해당하는 업데이트 정보를 공개했습니다. 앞서 버전 69에서는 자동 로그인이라는 옵션이 논란을 일으켰었습니다. 지메일, 유튜브 등 다른 구..
네이버 HTML의 기본 구조, 틀, 뼈대 이 글을 보고 계시는 분들이시라면 HTML에 관심이 있어서 방문하셨을 것입니다. HTML은 앞서 설명한 대로 홈페이지를 만들 때 뼈대 역할을 합니다. HTML의 의미와 역사를 함께..
HTML의 의미 HTML은 HyperText Markup Language의 약자로 하이퍼텍스트를 가장 중요한 특징으로 마크업이라는 형식을 가진 컴퓨터 프로그래밍 언어 입니다. (프로그래밍 언어지만 마크업의 형식이 강해 마크업 언..