코딩/위코드 코딩학습

[위코드] TIL(Today I am learned) -01

카슈밀 2020. 6. 22. 22:36
반응형

코딩학습 TIL 작성 1일차

- HTML -

<!DOCTYPE html> 이 선언문은 html 브라우저에서 HTML5를 사용하는 것을 알려주는 의미로 

여태껏 유투브에서 그냥 이 문서가 HTML이다라고 단순히 사용되는 것으로 아는 줄 알았는데, 그런게 아니었다.

이 문서가 정확히는 HTML5로 버전맞춰 읽어라 라는 컴퓨터가 인식할 수 있게 도와주는 문구였다.

 

태그나 클래스 선택자, ID선택자들은 유튜브에서 알려주었으나

속성(attribute), 요소(Element) 등은 안 알려주었는데, 기본적인 것들을 알 수 있게 되었다.

흔히 <a>, <img> 등 태그 뒤에 오는 것들이 src, href, alt 등이 속성을 의미한다. <h1>요소</h1>로 요소라고 적힌 부분이 요소를 의미한다.

기초부분은 의외로 너무나도 기초라 다들 대충하나 이를 지칭하는 것을 모른다면,
타인에게 매우 기초가 부실하다고 인식하기 쉽다.

이러한 기초는 쉽게 보이나 매우 중요하다. 수리 부분을 배워봤으면 이해할 것으로 생각된다.

수학능력검정시험에서 4점, 5점짜리는 결국 이러한 기초를 통해서 문제해결이 가능하므로 결코 무시할 수 없는 부분이다. 

 

<span> 태그를 사용시에 한 줄로 나오는데, 이를 'inline-element'라고 한다.

span은 태그를 주로 텍스트를 사용하며, 줄 바꿈이 일어나지 않는 특징을 가짐.

 

div(division의 약자.) 태그의 특징은 자체적으로 의미가 있지는 아니한다.

사용하는 이유로는

  • 비슷한 부분끼리 그룹 짓기
  • 디자인에 맞게 레이아웃을 분리
  • 각 <div>에 class나 id attribute(속성)를 부여하여 css 스타일을 입혀줄 수 있다.

라고 하는데, div와 span 태그의 구분이 가장 어려운 것 같다.

간단히 자동 줄바꿈 여부로 구분하긴 하는데, 아직 정확한 개념을 이해하지 못하였다.

 

- css -

<link href="index.css" rel="stylesheet" type="text/css" />

  • link — link태그로 사용할 css파일을 링크해줍니다.
  • href — href 속성에 css 파일 경로를 작성합니다.
  • type — link태그로 연결되는 파일이 어떤 것인지 알려줍니다. 여기서 css file을 연결하므로 type값은 항상 "text/css"입니다.
  • rel — rel은 HTML file과 CSS file과의 관계를 설명하는 속성입니다. css파일을 링크할 때는 항상 "stylesheet"값을 대입해줍니다.

<link href="링크한 css이름" rel="html파일과 css파일 관계설명" type="연결되는 파일의 종류와 css연결되는 파일이 어는 것인지 알려줌" />

 

color : red;

좌측 속성(property)

오른쪽 속성에 대한 값

 

css 선택자 종류       

태그선택자 p, div, span 
클래스 선택자   .(dot)
id선택자 #으로 사용

 

폰트 스타일 설정.

font-family

폰트의 스타일을 지정하는 속성

font-family: Georgia, "Times New Roman", Times, serif;

폰트 속성을 조지아가 있다면 조지아로 쓰고, 없으면 타임즈 뉴 로만, 없으면 타임즈, 마지막에는 세리프로 설정하려는 문장이다.

이때 "Times New Roman"만 쌍따옴표로 작성되었는데, 이때 띄어쓰기가 있다면 쌍따옴표를 사용해야하기 때문이다.

 

이외에도 font-size(폰트 크기조절), font-weight(폰트 두께조정), font style(스타일을 변경할때 쓴다. 폰트 패밀리와 착가할 수 있는데, 이탤릭체등을 적용할때 쓴다.) 

 

들여쓰기(indent)

text-indent(들여쓰기)

blockquote 인용구문에 쓰는 태그

&nbsp 자바스크립트 띄어쓰기(스페이스)를 의미하는 코드

 

마진(273*90px)

margin, border, padding 내용로 가는데, 내용물의 순수 넓이는 163px

기본 273*90px인데, border 5px, padding 50px만 뺏다가 한쪽변이 더 있다는 것을 깨닫고 보니 content의 순 가로변이 163px임을 깨달았다.

그 이전까지는 왜 163px인지 이해가 안되서 좀 고생하였다. 한변만 있다고 생각한 바보 ㅠㅠ

 

Box-sizing

  width: 300px;
  margin-bottom: 20px;
  padding: 50px;
  border-width: 10px;

가로 변이 실제 넓이는 300px이지만

border-width 10px, padding 50px때문에 순가로변이 420px로 구성된다.

이를 방지하기 위해서 

 

Box-sizing 속성을 쓰는데

예를들면

.new {

box-sizing: border-box;

}

로 사용되는데, 따로 무슨 숫자라던가 등의 기입을 하지 아니하는 것 같다.

 

상속(Inheritance)

상속은 css가 가진 특성.

말 그대로 스타일이 상속되어 자식에게도 같은 스타일이 적용된다는 의미.

<body><div>.javascript 순으로 태그가 정렬되어 있고, body에 컬러폰트가 적용되어 있을 시에

이를 하위태그들도 영향받는다는 의미.

(단, 하위 태그에서 본인들의 속성을 갖고 있을시에 본인속성을 유지함.)

 

그룹(Grouping)

이 태그에, 저 태그, 이 클래스에.. 같은 스타일을 적용할때 사용된다.

그럴 때 각자의 selector에 모두 똑같은 스타일을 적기보다는 다음과 같이 한꺼번에 스타일을 지정할 수 있다.

.what-is-blockquote, span {
  color: green;
}
(여기서 "what-is-blockquote"는 클래스 태그의 이름이다.)
p .james span {
}
이런 식으로 진행도 가능하다.

  • inline styling(13줄에 style 요소로 직접): 1000점

  • id: 100점

  • class: 10점

  • tag: 1점

    선택자 우선순위.

img넣기

방법은 2가지로 구분된다.

<img src="">로 넣거나 css를 통하여 넣는 방법인데, 보통 전자가 쉬우나 가독성이 떨어지는 관계로

관리하기 편하게 css로 넣어야한다.

background-image: url("")로 css에 기입하는 방법으로 사용되나 이미지에 따라서 배경색을 입혀야 한다.

주의할 점으로는 

div태그는 자식태그나 div태그 내부에 있는 내용의 세로크기가 곧 div태그의 세로가 됩니다.

div태그의 가로크기는 div태그의 내부에 뭔가가 있기만 하면 화면 전체의 너비가 곧 자기의 가로크기가 됩니다.

 

Block, inline 개념

위에 잠깐 inline을 언급하는데, 그 당시에는 이해하지 못 하였으나, block개념을 이해하면서 inline을 이해하게된다.

block은 div와 같이 한줄 전체를 커버하는 것으로 그 옆에는 다른 요소가 붙지 못한다.

그에 해당되는 태그들은 div, header, footer, p, li, table, h1등이 대표적인 block태그이다.

 

inline 태그는 span이 대표적인 예시로 볼 수 있다.

하지만, block태그라 하여 inline을 사용할 수 있게 도와주는 css 속성으로 display와 float가 있다..

.inline-p {

display: inline-block;

}

.float-left {

float: left;

}

.float-right {

float: right;

}

이렇게 속성을 부여하면, 인라인 성질로 변경하여 사용이 가능하다.

반대로도 가능한데, inline에서 block으로 바꾸려면

.block-span {

display: block;

}

로 쓰면 block태그로 사용이 가능하게 된다. 해당 <span>은 <p>와 동일한 성질을 갖게 되었다.

 

none

일시적으로 숨겼다가 사용자(user)가 해당기능을 사용하면 다시 보여줄 때 사용되는 기능이다.

유저와 상호작용할때 사용된다.

margin(마진)

.center {

margin: 20px auto;

}

이때

1개 값이 있을 때는 사방 모두 같은 margin을 준다는 의미였고,

4개 값이 있을 때는 위/오/아래/왼 순서로 margin을 준다는 의미.

이렇게 2개의 값만 있을 때의 의미는 첫 번째는 위, 아래의 margin이고,

두 번째는 왼, 오른쪽에 주는 margin이라는 뜻.

 

오늘은 여기까지.

728x90
저작자표시 비영리 변경금지

'코딩 > 위코드 코딩학습' 카테고리의 다른 글

[위코드] TIL(Today I am learned) -06  (0) 2020.06.30
[위코드] TIL(Today I am learned) -05  (0) 2020.06.30
[위코드] TIL(Today I am learned) -04  (0) 2020.06.26
[위코드] TIL(Today I am learned) -03  (0) 2020.06.24
[위코드] TIL(Today I am learned) -02  (0) 2020.06.24

'코딩/위코드 코딩학습'의 다른글

  • 현재글[위코드] TIL(Today I am learned) -01

관련글

댓글

티스토리툴바