kim-4480.log https://velog.io/ 최대한 간결하고 알기 쉽게 글을 쓰고 있습니다. 반갑습니당 Fri, 21 May 2021 13:56:16 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed Copyright (C) 2019. kim-4480.log. All rights reserved. <![CDATA[css의 사용법에 대해 알아보자 (css입문하기)]]> https://velog.io/@kim-4480/css%EC%9D%98-%EC%82%AC%EC%9A%A9%EB%B2%95%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90css%EC%9E%85%EB%AC%B8%ED%95%98%EA%B8%B0 https://velog.io/@kim-4480/css%EC%9D%98-%EC%82%AC%EC%9A%A9%EB%B2%95%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90css%EC%9E%85%EB%AC%B8%ED%95%98%EA%B8%B0 Fri, 21 May 2021 13:56:16 GMT html로 웹 문서를 작성했다 하더라도, 바로 사용자가 이용하기에는 무리가 있습니다.

가독성이 심각하게 떨어지기 때문입니다.

그래서 html문서를 꾸며주는 css를 사용하게 되는데요,

바로 알아보도록 하겠습니다.

우선, css는 선택자를 가지게 됩니다.

이 선택자는 html의 태그들을 선택하거나, 우리가 html에서 지정한 id, 클래스 이름들, 또는 문서 전체를 선택하게 됩니다. 그 다음 {중괄호}를 열어 이 안에 우리가 선택한 것들에 대해 꾸며주는 속성들을 넣어주게 됩니다.

<html>
 <div class="box1">box1</div>
 <div id="box2">box2</div>

</html>

이러한 html상의 태그, 지정한 클래스와 id값, 또는 html 자체를 꾸며주는 방법은 다음과 같습니다.

* { 
margin: 0;
pading: 0;
} 
/*별 표시는 html 전체에 대한 선택자로, 여기에서 지정한 값들은
문서 전체에 적용되게 됩니다.*/
div {
height: 40px;
width: 40px;
}
/*여기서는 div 태그를 지정해 주었습니다. 여기서 지정한 값들은 
html 문서 안의 모든 div 태그들에 적용되게 됩니다.*/
.box1 {
color: red;
}
/* .(점)과 함께 html상에서 지정해 둔 클래스의 이름을 작성해 주면,
클래스 이름을 지정해 둔 부분에 대해 꾸며줄 수 있습니다.*/
#box2 {
back ground-color: blue;
}
/* #과 함께 html에서 지정한 id의 이름을 작성해 주면 id이름을 지정해 둔
부분에 대해 꾸며줄 수 있습니다.*/

이렇게 선택자를 이용해 {중괄호} 앞에서 꾸며줄 범위를 지정해 주었다면,

중괄호 안에 다양한 속성값들을 입력해 지정한 태그, 클래스, id 들을 꾸며 줄 수 있습니다.

이 속성들에 대해서 오늘은 간단하게만 설명하겠습니다.

먼저 margin과 pading입니다. 마진과 패딩은 각각 html에서 지정한 영역의 바깥 부분과 안쪽 부분을 채워주는 속성들입니다.

height는 지정한 영역을 세로로, width는 가로의 크기를 지정해 주게 됩니다.

color 속성은 선택자로 지정한 영역의 텍스트들의 색상을 지정해 주며, back gound 컬러는 지정한 영역 전체의 배경색을 지정해 줍니다.

css의 스타일 속성값들은 너무 방대한 관계로, 이번 문서에서는 간단히 훑고 넘어가는 수준으로만 설명드리는 점 양해 부탁드립니다.

끝으로, css와 html은 html의 헤드 부분에 link 태그를 작성하여 연결합니다.

<html>
      <head>
        <link rel="stylesheet" href="style.css"/>
      </head>
</html>

보통은 style.css로 많이 지정하시겠지만, 본인이 다른 이름을 지정하셨다면 링크된 부분에 반드시 그 이름으로 작성하셔야 합니다. lewandowski.css로 이름을 지정하셨다면 반드시 href="lewandowski.css"가 되어야 합니다.

오늘도 읽어주셔서 감사합니다.

]]> <![CDATA[HTML문서에 사진을 불러오고 싶어요 (img 태그)]]> https://velog.io/@kim-4480/HTML%EB%AC%B8%EC%84%9C%EC%97%90-%EC%82%AC%EC%A7%84%EC%9D%84-%EB%B6%88%EB%9F%AC%EC%98%A4%EA%B3%A0-%EC%8B%B6%EC%96%B4%EC%9A%94-img-%ED%83%9C%EA%B7%B8 https://velog.io/@kim-4480/HTML%EB%AC%B8%EC%84%9C%EC%97%90-%EC%82%AC%EC%A7%84%EC%9D%84-%EB%B6%88%EB%9F%AC%EC%98%A4%EA%B3%A0-%EC%8B%B6%EC%96%B4%EC%9A%94-img-%ED%83%9C%EA%B7%B8 Wed, 19 May 2021 04:34:17 GMT html에 사진을 불러올 때는 img/ 태그를 사용해 줍니다.

정확히는 다음과 같습니다.

<img src="불러올 사진이 있는 폴더의 이름/사진의 이름.확장자 />

불러오고 싶은 사진이 들어있는 폴더 이름이 bundes , 사진의 이름은 schalke04, 사진의 확장자는 png라고 하면 img/ 태그는 다음과 같이 작성합니다.

<img src="bundes/schalke04.png" />

폴더 안에 있는 또 다른 폴더에서 사진을 불러와야 한다면

<img src="football/bundes/schalke04.png" />

위와같이 폴더/폴더/이미지.확장자 식으로 파일을 불러 오시면 됩니다.

폴더 안에 있지 않은 경우라면 바로 이미지 이름.확장자로 불러오실 수 있답니다.

이미지를 잘 확인하시고

폴더이름/사진이름.확장자

잘 기억하시면 크게 어려운 점 없이 사진을 html상에 올리실 수 있으실 겁니다.

이미지가 어떤 확장자를 가졌는 지 확인하시려면 사진 파일에 마우스 커서를 올려두시면 되시겠습니다.

이미지의 확장자가 흰색 레터박스 안에 있는 것을 확인하실 수 있습니다.

마치기 전에 확장자에 대해 부연 설명을 드리자면, 크게 세 가지로 구분 할 수 있습니다.

png, jpg, gif가 대표적인 이미지의 확장자들인데요,

이 중 jpg가 가장 보편적으로 사용되며 커버할 수 있는 색상의 범위가 가장 넓습니다.

png는 투명한 배경에 이미지를 올릴 수 있는 확장자입니다.

gif는 움직이는 애니메이션 기능을 제공하며 여러분들이 자주 보시는 움짤이 바로 이 gif 확장자를 통해 제공되는 것입니다.

오늘도 읽어주셔서 감사합니다. 더 유익한 글로 다시 뵙겠습니다.

]]> <![CDATA[짧음) 활용하기 좋은 HTML 태그들에 대해 알아보자]]> https://velog.io/@kim-4480/%EC%A7%A7%EC%9D%8C-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0-%EC%A2%8B%EC%9D%80-HTML-%ED%83%9C%EA%B7%B8%EB%93%A4%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90 https://velog.io/@kim-4480/%EC%A7%A7%EC%9D%8C-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0-%EC%A2%8B%EC%9D%80-HTML-%ED%83%9C%EA%B7%B8%EB%93%A4%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90 Tue, 18 May 2021 09:53:05 GMT 1.pre 태그

일반적으로 html 파일에서 태그 안에 작성한 텍스트의 단락을 바꾸기 위해서는 각각의 단락들을 박스 안에 넣거나 br/ 태그를 단락의 끝에 붙여줍니다.

태그 안에 작성한 텍스트들은 메모장이나 블로그처럼 엔터 키로 단락을 구분해줄 수 없기 때문입니다.

하지만 pre태그를 지정해 주고 그 안에서 텍스트를 작성하면 엔터 키로 간단히 단락을 구분해줄 수 있답니다.

참, 태그를 사용하실 때 <>로 열고, </> 로 닫는 거 잊지 마세요!

2.br/ 태그

앞서서 설명드렸지만 엔터로 단락을 이동시킬 수 없는 태그들 안의 텍스트들은 br/ 태그로 단락을 나눠주어야 합니다.

사실 대부분의 태그들이 태그 안에 적은 텍스트를 엔터로 이동시키는 방법을 지원하지 않기 때문에 단락을 나눌 때는 거의 대부분 br/ 태그를 이용하게 됩니다.

사용하는 방법은 간단합니다.

나누고 싶은 단락의 끝에 br/ 이런 식으로 br/ 사용하게 됩니다 br/

br/ 태그는 <>안에 꼭 넣어주세요!

저는 지금 블로그 버그때문에 저 태그를 <>안에 넣으면 태그 자체가 안 보여서;; 어쩔 수 없이 이렇게 작성하는 중이랍니다.

참고로 br/ 태그는 열어주고 닫아주고 따로따로 할 필요 없이 < br/> 을 해 주면 바로 작동합니다.

3. blockquote 태그

blockquote 태그는

"이러한 인용문을 만들 때 사용됩니다."

적절하게 잘 쓰면 멋있는 인용 효과를 줄 수 있답니다.

사용하는 방법은 간단합니다.

<blockquote>
이런식으로
</blockquote>

사용해 주시면 됩니다.

4.hr/태그

html 상에 긴 가로줄을 만들어 주는 태그이며 이런 취소선이 아니라 말 그대로 화면상에 긴 가로줄을 만들어 줍니다.

컨텐츠를 구분해 줄 때 유용하게 활용하실 수 있습니다.

열고 닫아줄 필요 없이 <>열고 이 안에 hr/만 사용해도 잘 적용이 됩니다.

이번 포스트에서는 알아두면 활용하기 좋은 4개의 html 태그들에 대해 알아보았습니다.

다음에는 더 좋은 글로 뵙겠습니다. 읽어주셔서 감사합니다.

]]> <![CDATA[다들 HTML부터 배우라고 하는데, 대체 HTML은 뭔가요?]]> https://velog.io/@kim-4480/%EB%8B%A4%EB%93%A4-HTML%EB%B6%80%ED%84%B0-%EB%B0%B0%EC%9A%B0%EB%9D%BC%EA%B3%A0-%ED%95%98%EB%8A%94%EB%8D%B0-%EB%8C%80%EC%B2%B4-HTML%EC%9D%80-%EB%AD%94%EA%B0%80%EC%9A%94 https://velog.io/@kim-4480/%EB%8B%A4%EB%93%A4-HTML%EB%B6%80%ED%84%B0-%EB%B0%B0%EC%9A%B0%EB%9D%BC%EA%B3%A0-%ED%95%98%EB%8A%94%EB%8D%B0-%EB%8C%80%EC%B2%B4-HTML%EC%9D%80-%EB%AD%94%EA%B0%80%EC%9A%94 Tue, 18 May 2021 06:23:18 GMT HTML은 웹 사이트의 기능, 콘텐츠가 여러분이 보시는 화면에서 나타나게 해 주는 컴퓨터 언어입니다.

HTML은 다양한 브라우저에서 웹 사이트가 일관적으로 보여질 수 있도록 만들어졌습니다.

지금 읽고 계신 이 글도 HTML을 통해 여러분들에게 보여지고 있는 것입니다.

윈도우에서는 ctrl + shift + i 버튼을 동시에 눌러, 맥(애플) 에서는 option + command + U 버튼으로 html을 확인하실 수 있습니다.

console 창이 먼저 뜨게 될 텐데, 당황하지 마시고 바로 왼쪽의 Elements를 클릭해 주세요.

그렇게 html를 확인하게 되시면 굉장히 많은 글자들이

<꺾쇠괄호>

안에 있는 것을 확인하실 수 있습니다.

그것들이 바로 태그이며, html은 그러한 태그들로 구성이 됩니다.

태그들은 html 안에서, html 이 브라우저에 어떻게 보여지고 기능할 지를 정의하게 됩니다.

어떤 태그가 어떤 기능을 하게 되는지에 대해서 오늘은 중요한 것만 간략하게 짚고 넘어가겠습니다.

태그들은

<꺾쇠괄호로 열고>

</슬러시로 닫습니다.>

한 번 연 태그는 반드시 </닫아야> 정상적으로 작동합니다.

HTML이 정상적으로 기능하기 위해서는 반드시 지켜야 하는 기본적인 구조가 있는데요,

그러한 구조또한 <태그>들을 이용해서 작성하게 됩니다.

기본적인 구조는 다음과 같습니다.

<!DOCTYPE html> html 지정
<html lang="ko"> 언어 설정, 가장 큰 범위로 html문서가 여기서 시작됩니다
<head> 문서의 머리 부분에 해당, 실제 문서에서는 보여지지 않는 영역으로
여기에 css, 자바 스크립트나 외부 페이지를 연결해 줌
<meta charset="utf-8"> 어떤 언어까지 지원하는 지 설정할 수 있음
<title></title> 브라우저에 이 문서의 제목을 보여주는 역할
</head>

<body>
 실질적인 컨텐츠와 기능들은 전부 바디 안에서 표기됨
</body>
</html>

제일 먼저 해야 할 것은 !DOCTYPE html 을 이용해서 문서가 html이라는 것을 작성해 주는 일입니다.

원래는 다른 태그들과 마찬가지로 <> 안에 넣어야 합니다. 저는 지금 블로그에 버그가 있어서 못 넣었습니다.

그 다음에는 html lang="00" 태그를 사용해 00에 웹 사이트에서 사용할 언어를 지정해 줍니다. 태그 안의 lang은 언어를 의미합니다. /html로 닫아주시면 됩니다.

00부분에는 쓰고싶은 언어의 앞글자 두 개를 따서 써 줍시다. 한국어면 "ko" 영어면 "en" 등등 주로 사용할 언어를 지정해 주시면 되겠습니다.

간혹 중국어의 경우처럼 "zh" 같은 형태로 지정해 주어야 하는 경우도 있으니 사용하시기 전에 한 번 검색해 보시는 걸 추천드립니다.

이제 head 부분을 지정해 주고, 그 안에 meta charset으로 어떤 언어까지 지원하고 지원하지 않을 것인지를 정하고, title로 브라우저 상단에 문서의 제목을 지정해 줍니다.

meta charset과 title만 넣어 주긴 했지만, head 안에는 css나 자바스크립트를 연결해 줄 수도 있습니다.

meta charset은 사이트 안에서 통용되는 언어의 범위를 지정해줍니다.

charset 안의 uft-8은 지원되는 언어의 범위로서, 가장 많은 언어를 지원합니다. 그 밖에 euc-kr처럼 다른 언어 범위를 지정할 수도 있지만, 그럴 경우 지원되지 않는 외국어 텍스트는 화면 상에 깨져서 나오게 됩니다.

title은 말 그대로 제목을 지정해 주는 태그입니다. 브라우저 상단 바에 보이는 설명같은 게 이 title로 지정되서 나온거구나~ 하고 이해하시면 되겠습니다.

이제 body 태그로 웹 사이트에서 사용자에 보여질 부분들을 지정하게 됩니다.

메인 컨텐츠들과 기능들은 모두 body 태그 안에서 사용자에게 전달되게 됩니다.

설명은 가장 짧지만 html안에서 가장 중요한 부분입니다.

이 단계까지 지나고 나면 /html로 html문서가 끝나게 됨을 알 수 있습니다.

이렇게 HTML이 어떤 언어이고 어떤 구조를 가지고 있는지 알아봤습니다.

한 가지 주의하실 점은 html을 작성하실 때 

<html>
  <head>

같이 위부터 아래로 작성하시지 마시고

<html>
</html>
<html>
  <head></head>
</html>

처럼 더 큰 범위에서 작은 범위로 작성하시길 바랍니다.

또 다른 글로 찾아뵙겠습니다. 읽어주셔서 감사합니다~

]]>