'웹 언어 배우기' 카테고리의 글 목록 (5 Page)

웹 언어 배우기 (44)

css 테두리 효과를 주는 border 속성

웹 언어 배우기/CSS 다한(dahan) 2018. 11. 10. 09:00

위 사진은 네이버를 빨간색 테두리로 구역별로 나눈 것입니다. 상단은 header, 목록은 nav, 뉴스 컨텐츠는 section1, 과학, 법률 등의 목록은 section2, 로그인부분은 aside로 나눴습니다. 네이버를 더 자세히 들여다보면 회색으로 테두리가 있는 것을 알 수 있습니다. 이는 모두 css에서 테두리 효과를 주는 border 속성을 이용한 것입니다. 그럼 지금부터 border 속성에 대해 알아보겠습니다. border 속성 기본 구문 border 속성은 전체 테두리를 설정할 수 있고 한 곳(아래, 위, 왼쪽, 오른쪽)만 테두리를 줄 수 있습니다. 먼저 전체 테두리를 설정하는 구문입니다. border: border-width border-style border-color; border-widt..

html파일에 css 적용하는 3가지 방법

웹 언어 배우기/HTML 다한(dahan) 2018. 11. 6. 07:00

html과 css는 떼려야 뗄 수 없는 관계입니다. 그건 누구나 다 아는 사실입니다. 그럼 html파일에서 css는 어떻게 써야 할까요? 총 3가지의 방법으로 적용할 수 있습니다. 많이 쓰이는 HTML 태그 간단히 살펴보기CSS 뜻과 기본 문법 html 태그에서 적용 html파일 내에 있는 태그 옆에다 css를 적용하는 방법입니다.h1 태그입니다. html 태그옆에 style=""을 쓰고 안에는 "속성:속성값"으로 적용할 수 있습니다. 이 방법으로 사용한다면 한눈에 알아볼수 있다는 장점이 있습니다. 하나의 페이지만 있는 경우 상관없지만 홈페이지의 경우 많은 페이지들(파일들)이 있을것입니다. 그럼 하나하나 태그 옆에다 쓰면 효율성이 떨어질것입니다. 결국, 이 방법은 하나의 페이지가 있는 경우만 사용하는 것..

html 주석 처리하는 방법

웹 언어 배우기/HTML 다한(dahan) 2018. 11. 4. 09:00

프로그래밍 언어에서 주석이란 쉽게 말해 코드에 메모를 남기는 기능입니다. 그래서 주석은 웹 브라우저에서 보이지 않을 뿐만 아니라 검색엔진에도 보이지 않습니다. 그러면 어디서 사용할 수 있을까요? 첫 번째로 평소에 쓰던 코드를 잠시 동안만 쓰고 싶지 않을 때 사용할 수 있습니다. 나중에 다시 쓰고 싶으면 주석 처리된 코드만 다시 없애면 쓸 수 있기 때문입니다. 두 번째로 팀 프로젝트 할 때 사용할 수 있습니다. 대부분 팀 프로젝트 할 때에는 모든 사람이 한 작업만 하는 것이 아니라 나눠서 작업을 합니다. 팀 인원이 다하면 파일을 합치게 되는데 이때 어떤 코드가 사용되는지 주석으로 메모하면 좋겠죠? 그럼 html에서 주석 처리하는 방법에 대해 알아보겠습니다. html 주석 처리 하는 방법 간단합니다. ''로..

CSS 뜻과 기본 문법

웹 언어 배우기/CSS 다한(dahan) 2018. 11. 1. 08:06

html이 웹페이지의 뼈대(틀) 역할을 한다면, css는 웹페이지의 디자인, 레이아웃 등 스타일 역할을 합니다. CSS는 Cascading Style Sheets의 약자로 html 요소들이 각종 디자인, 레이아웃 등 사용자에게 어떻게 보여지는지 정의하는 스타일 시트 언어입니다. html과 css의 결합형태 즉, 기본 문법은 어떻게 되는지 알아보겠습니다. CSS 기본 문법 구글이라는 링크를 코드로 적어보면, 구글로 이동 여기에 CSS를 적용하여 폰트의 색깔을 하얀색, 배경색을 빨간색으로 하는 코드를 적어보면, 로 적을수 있습니다. CSS 문법은 선택자와 선언부로 구성됩니다. 위 코드에서 선택자는 a태그 입니다. 즉, 적용하고자하는 html 요소를 의미합니다. 선언부는 하나 이상의 속성과 속성값으로 중괄호(..

div 태그와 span 태그의 차이점

웹 언어 배우기/HTML 다한(dahan) 2018. 10. 30. 07:00

이전 글에서는 줄바꿈 기능을 하는 br 태그와 단락을 나누는 p 태그 즉, 기능이 있는 태그에 대해 알아보았습니다. 이와 반대로 div 태그와 span 태그는 의미가 없는 것이 특징인데 영역을 나눌 때 사용합니다. p 태그와 br 태그의 차이점 영역 설정의 차이점 두 태그의 차이점을 한눈에 볼 수 있는 방법이 있습니다. 바로 개발자 도구를 이용해서 말이죠. div 태그 span 태그 어떠신가요? 한눈에 알아보실 수 있으신가요? div 태그의 경우 가로폭을 전부 차지하고 있고, span 태그의 경우 텍스트 주변에만 치지하고 있습니다. 때문에 div 태그의 경우 가로, 세로 폭을 사용자 마음대로 값을 지정할 수 있습니다. 하지만, span 태그의 경우는 그렇지 못합니다. 조금 더 쉽게 설명해드겠습니다. 위 ..

p 태그와 br 태그의 차이점

웹 언어 배우기/HTML 다한(dahan) 2018. 10. 29. 07:00

코드상에서 글을 쓸 때 아무리 줄바꿈을 해도 단락을 바꿔봐도 웹 브라우저에서는 한 줄로 보이는 경험을 해보셨을 것입니다. 그렇다면 어떻게 해야 한 줄이 아닌 사용자가 원하는 대로 텍스트를 나눌 수 있을까요? 바로 p 태그와 br 태그의 사용으로 텍스트를 나누거나 줄바꿈을 할 수 있습니다. 그럼 지금부터 이 두 개의 태그는 어떤 문법으로 사용하는지 또 차이점에 대해 알아보겠습니다. br 태그 br 태그는 shift+enter의 역할을 합니다. 즉, 줄바꿈을 하는 태그입니다. 또, br 태그는 닫힌 태그()를 사용하지 않습니다. 때문에 br 태그를 쓴 갯수만큼 줄바꿈을 하게 됩니다. 안녕하세요. 다한의 웹 블로그 다한입니다. 잘부탁드립니다. p 태그 p 태그는 우리가 흔히 사용하는 enter역할을 합니다. ..

html 이미지 불러오는 방법, img 태그 속성를 이용하자!

웹 언어 배우기/HTML 다한(dahan) 2018. 10. 28. 09:00

html에서 a 태그를 써서 링크를 만들 수 있고 img 태그를 써서 이미지를 불러올 수 있습니다. 또한, 이 두 개의 태그를 섞어서 이미지를 클릭했을 때 다른 페이지로 이동할 수 있습니다. 즉, 중첩하여 사용자에게 더 다양한 기능을 제공할 수 있습니다. 그래서 오늘은 img 태그 속성을 이용하여 html 이미지를 불러오는 방법에 대해 알아보겠습니다. 링크 역할하는 a 태그의 많이 쓰는 속성들 살펴보기 html img 태그 속성 img 태그와 관련하여 한가지 예제로 시작하겠습니다. tistory.png이라는 사진의 이름을 경로 불명(엑스박스)이 떴을 때 tistory_logo라는 이름이 나오게하고 폭은 꽉 차게 길이는 200px만큼의 사진을 불러오고 싶을 때, 라고 코드를 작성할 수 있습니다. a 태그와..

링크 역할하는 a 태그의 많이 쓰는 속성들 살펴보기

웹 언어 배우기/HTML 다한(dahan) 2018. 10. 27. 09:00

html5에서의 a 태그는 하이퍼텍스트 즉, 링크 역할을 하는 태그입니다. 대표적으로 링크의 목적지를 나타내는 속성 href가 있습니다.부가로 링크 된 문서를 열 때의 위치를 지정하거나 현재 문서와 링크된 문서 간의 관계를 지정하는 속성 등 많은 기능이 있습니다.그럼 지금부터 a 태그 중에 많이 쓰는 속성들을 살펴보겠습니다. html a 태그 속성 href 속성이동하려는 페이지의 URL(주소)을 지정하거나 페이지 내부에서 이동을 제어할 수 있는 속성 네이버로 이동하는 링크를 작성한다면, 네이버로 이동으로 작성할 수 있습니다. 같은 페이지에서 위로 가는 페이지를 작성한다고 하면,Go to Top으로 작성할 수 있습니다. 여기서 #은 내부 대상 위치를 지정하는 id 값(속성)입니다.#과 비슷한 속성은 nam..

1
2
3
4
5
6

Copyright © 다한의 웹 블로그 All Rights Reserved

Designed by JB FACTORY

티스토리툴바