정규세션(1주차-1)

웹 이란?

클라이언트(웹 브라우저) : http 요청
서버(웹 서버) : http 응답

검색엔진의 우선순위

< p > 태그로 < h2 > 태그와 동일한 시각 효과를 낼 수 있을지 몰라도,
검색엔진은 < h2 > 를 더 위에 배치한다.

HTML 태그에 속성 부여하기

태그만으로 웹페이지에 줄 수 있는 정보가 부족한 경우, 속성을 부여할 수 있다.
ex) img 태그에 src 속성을 부여하기

속성의 작성 순서를 상관없다
속성을 구분하는 것은 띄어쓰기 한번이면 된다

html 을 css에 적용하는 방법

inline : 태그가 있는 줄에서 css를 적용하는 방법
internal : head 태그 안에 style 태그를 작성하고 그 내부에 css를 적용
external => 내부적으로 구현이 달라짐 / 유지,보수 up! / link를 걸어주면 css 파일을 시각적 효과를 가능하게 해줌 / 원래는 동작이 느리지만 캐싱을 통해 빠르게 웹페이즈를 보여줄 수 있다

가장 좋은 css 적용방법은?

inline 방법 적용시

웹페이지가 1000개일때 h1 태그를 모두 수정시 => 1000개의 모든 태그를 싹다 수정해야함 (즉, 1000개의 html 파일에 있어야 할 css 코드를 external 방법을 적용시 한개의 코드로 작성가능)
=> css 코드가 모든 웹페이지에 중복해서 등장, 구조를 표현하는 html 에 css 코드가 섞여서 구조와 스타일이 섞여서 유지,보수가 어려워진다.

external 방법 적용시

중복을 제거해서 재사용성 높여줌. 코드에 대한 가독성을 높여줌
유지 보수를 편리하게 해줌
1000개의 html 파일에 있어야 할 css 코드를 external 방법을 적용시 한개로 줄이기 가능

캐싱 - 네트워크 측면에서의 효율성

internal 방법이 더 효율적이다
하지만 캐싱이 적용되면 external이 더 효율적이다.
캐싱이란?
- link 태그로 "likelion.css" 파일을 링크해놨다고 가정할때, html 파일을 하나하나 만들어서 웹페이지를 구현할 때마다 "likelion.css" 를 다운로드 받아야 한다. 그래서 효율적이지 못하다는 것이다.
- But! 캐싱이라는 것은 처음에 "likelion.css" 파일을 만나서 다운로드 받았다면, "likelion.css" 파일의 내용이 바뀌기전까지는 웹브라우저가 우리의 컴퓨터에다가 "likelion.css" 라는 파일을 저장해뒀다가, 다음에 link 라는 코드를 만나게 되면 또 다운로드 받을 필요없이 우리가 저장해뒀던 "likelion.css" 파일을 가져와서 그냥 쓰면되는 방식이다.
- 네트워킹 측면에서 유리
- 네트워킹 비용 절감

css 선택자

선택자 = css의 "주어"
- 효과를 주고자하는 대상(효과를 적용시키고자 하는 대상)
선택자 종류

태그 선택자 : 태그 전체를 선택

css 파일
h1{
  color: black;
}

html 파일
<h1>Lion</h1>

id 선택자 : 딱 하나만 집어서 효과를 적용하고자 하는 대상
- 고유한 값. html안에서 딱 한군대에만 사용해야 하는 값을 가리킴

css 파일
#lion{
  color: red;
}

html 파일
 <h1 id = "lion">Lion</h1>

클래스 선택자 : 비슷한 스타일을 여러 곳에 적용하기 위해 사용하는 것
- html안에서 중복해서 여러 군대 쓸수 있는것

css 파일
.like{
  color: blue;
}

html 파일
  <h1 class = "like">Lion</h1>

css 선언형태

선택자 {
	속성1: 값1;
	속성2: 값2;
}

선택자 : 태그 vs 클래스 vs id
- 우선순위 : id > 클래스 > 태그
- 적용범위 : id > 클래스 > 태그
  - id 는 단 하나의 태그에만 적용 가능함

<html>
  <head>
    <style>
      #lion{    => id
        color: red;
      }
      .like{   => 클래스
        color: blue;
      }
      h1{     => 태그
        color: black;
      }
    </style>
  </head>
  <body>
    <h1 class = "like">Like</h1>
    <h1 class = "like" id = "lion">Lion</h1> => id가 클래스보다 우선순위가 높으므로 id가 적용이 된다.(즉, color: blue 가 적용됨)
  <body>
<html>

박스 모델

content : 내용
padding : border와 content 사이의 공간
border : 테투리
margin : 테두리 바깥 공간
- width, height 는 content에 적용되는 속성!

display 속성

화면에 어떻게 드러나게 할지를 결정하는 속성
(요소 크기를 어떻게 결정한건가를 결정하는 속성)

html 여러 태그들은 각 태그의 성격과 일반적인 쓰임에 따라서 화면 전체를 쓰는 태그와, 자신의 컨텐츠 크기 만큼만 쓰는 태그로 나뉜다.

ex) h1 태그의 경우 제목 태그이므로 한줄 전체를 사용해야한다는 특성
likelion 의 경우 그냥 contents 로써 자기 컨텐츠 크기 만큼만 공간을 사용

block element : h1 과 같이 한줄 전체를 쓰는 것. 욕심이 많아 컨텐츠의 길이에 상관없이 한줄을 다 차지
inline element : 딱 자신의 컨텐츠 크기만큼만 공간을 사용
- width와 height, margin, 등의 값이 무시됨. 크기 조절못함
inline - block : block과 inline의 특징을 모두 지님. 새로운 줄을 차지하지 않으면서도 block 처럼 width,height,margin 등의 크기 값을 조절할 수 있음

html 파일
<!DOCTYPE html>
<html>
    <head>
        <link rel = "stylesheet" href = "연습.css">
    </head>
    <body>
        <div>
            <div class = "None">I am None</div>
            <div class = "Block">I am block</div>
            <div class = "inline">I am inline</div>
            <div class = "inline-block">I am a inline-block/div>
        </div>
    </body>
</html>

css 파일 

div{
    font-size: large;
    margin-bottom: 50px;
}

.None{  
    display: none; /*화면에서 사라짐. 크기 자체도 차지하지 않는다.*/
    background-color: blueviolet;
}

.Block{
    display: block; /* block => 일반적으로 설정하지 않아도 div가 갖게되는 기본값. (태그에 따라 다를 수 있다.)*/
    border: 1px solid black; /*기본적으로 width가 자신의 컨테이너의 100%가 되게끔한다. 쉽게말해서, 가로 한 줄은 다 차지한다 */
    background-color: aqua;
}

.inline{
    display: inline; /* inline => 컨텐츠를 딱 감쌀정도의 크기만 갖게된다. block 태그와 다르게 줄바꿈이 되지 않고, */
    width: 1000px;  /* 반드시 컨텐츠를 감싸게 되고, 크기를 변화시킬 수 없다. 아래처럼 width 값을 1000px 로 바꿔줘도 크기는 여전히 글의 길이 만큼이다. */
    border: 1px solid black;  
    background-color: chartreuse;
}

.inline-block{
    display: inline-block; /*inline과 block의 특성을 합쳐놓은 속성. 기본적으로는 inline의 속성을 지니고 있지만, 임의로 크기를 바꿔줄 수 있다.*/
    width: 500px;
    background-color: gold;
    border: 1px solid black;
}

display 의 디폴트 값 - 변경가능

h1 태그는 block level 이고, 또 어떤 태그는 inline level 이라고 했지만 이것은 절대적이진 않다.
처음에 태그별로 주어진 display라는 속성의 기본값(디폴트값)이다.
언제든지 속성을 변경가능함!!!!!
h1 이 한줄을 다 차지하는 것이라고 했지만, display css 를 적용시 h1 선택자에다가 display:inline 이러면 변경이 되는 것이다.

position

웹 페이지 제작시 어떤 태그는 어디에 위치할 것인지를 지정
static : 기본 위치(디폴트 값)
- html 문서 상에서 원래 있어야하는 위치에 배치됨
- top, bottom, left, right 사용불가. (어떤 태그는 여기로 이동해! 이런거 불가능)

html 코드
<main>
  <div>첫번째 요소</div>
  <div>두번째 요소</div>
</main>

relative : 기본 위치(static) 을 기준으로 태그의 위치를 조정
- top, bottom, left, right 를 이용해 위치를 이동
- 태그가 원래 위치(= static일때) 를 기준으로 top(또는 right, bottom, left) 방향으로 주어진 픽셀만큼 이동
- realtive 는 각각의 방향을 기준으로 태그 안쪽으로 이동한다.
  => 바깥쪽으로 이동하게 하고 싶다면 음수 px 값을 주면된다.
- 부모에 대해서 상대적(relative) 위치를 가진다.

html 코드
<p class = "Mytop">Move to Top</p>
<p class = "MyRight">Move to Right</p>
<span class="MyBottom">Move to bottom</span>
<div class="MYLeft">Move to left</div>

css 코드
.MyTop{
  position: relative;
  top: 5px;
  z-index: 1;
}

.MyRight{
  position: relative;
  right: 5px;
}

.MyBottom{
  position: relative;
  bottom: 5px;
}

.MyLeft{
  position: relative;
  left: 5px;
}

absoulte : position이 static(기본값)을 가지지 않는 부모를 기준으로 top, bottom, left, right 로 위치를 지정. static 이 아닌조상이 존재하지 않을 경우 문서 전체를(가장 위의 태그인 body) 기준으로 위치를 조정
- html 태그는 부모-자식 관계를 가진다.
- div 안에 section 이 들어가고, 또 그 안에 div, section, article .. 등 여러 개가 들어갔을 것이다.
  - 감싸고 있는 태그를 부모태그, 안에 있는 태그를 자식태그가 된다.
- relative 는 무조건 자기 부모를 참고하지만, absolute 는 자기 부모들 중에서 static이 아닌 태그의 위치를 참조해서 left, right, top, bottom 의 값을 결정한다.

html 코드

<div>
  <div id = "MyTest">LIKELION</div> => 조상 태그 중 position: relative인 것이 없기 때문에
                                       body를 기준으로 가장 오른쪽으로 달라붙는다.
</div>
<div id = "parent">
  <div id = "child">childern</div> => 조상 태그인 #parent가 realtive 이므로 그것을 기준으로 가장 오른쪽으로 달라붙는다.
</div>

css 코드
#MyTest{ 
  background: yellow;
  postition: absolute;
  right: 0;
}

#parent{
  position: relative;
  width: 100px;
  height: 100px;
  background: skyblue;
}

#child{
  position: absolute;
  right: 0;
}

fixed : 페이지를 기준으로 top, bottom, left, right로 위치를 지정. 그 영역에서 절대!! 움직이지 않고 항상 특정 위치에 고정되어 있음. 스크롤을 내려도 따라옴

ex) 네이버에서 커서로 화면을 내릴 때 검색창이 위에 고정되서 같이 따라 내려오는 것
- 최상위에 있는 태그할 수 있는 태그의 위치를 기준으로 자신의 위치를 잡는다.

html 코드
<div>
  <div id = "fixed">fixed</div>
  
css 코드
#fixed{
  background: yellow;
  position: fixed;
  right: 0;
}

sticky : 지정된 위치(ex. top: 0px) 에 도달하기 전까지는 static 처럼 행동하다가 설정된 위치에 다다르면 fixed 속성처럼 행동
- top, bottom, left, right 로 위치지정 필수.

Author And Source

이 문제에 관하여(정규세션(1주차-1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@msung99/정규세션1주차-1

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)