21.12.28 [1] TIL : html/css - 단위, 위치 지정 / Javascript - 기초

16475 단어 JavaScriptTILhtmlCSSCSS

html/css : 다양한 단위들

* 주로쓰는 단위들

  1. em : font_size, 해당 폰트의 대문자 M의 너비를 기준으로 한다.
  2. ex : x-height, 해당 폰트의 소문자 x의 높이를 기준으로 한다.
  3. px : pixel, 출력 장치에 따라 상대적인 크기를 가진다.
  4. % : percent, 기본 글꼴의 크기에 대해 상대적인 값을 가진다.

아직 css를 많이 사용해보진 않았지만 주로 px와 %를 많이 쓰는 것 같다.
px는 요소 어디에서나 많이 쓰고 % 같은 경우에는
100%를 써서 화면에 꽉차게 할 때 쓰면 유용했다.

  • ex) 박스의 가로가 화면에 꽉 차게 하고 싶을 때(가로 여백 없게)
    --css--
.box1{
	height : 50px;
	width : 100%;
    background-color : auqa;
}

html/css : 위치 지정

* 위치 지정 : 포지션 속성을 사용하여 위치를 지정할 수 있다.

-중요 포지션 4가지

1. stactic

: 모든 요소의 default 값으로, 포지션 속성을 따로 설정하지 않았을 때 적용된다.
가장 위쪽, 왼쪽에 배치된다.

2. relative

: 자기 자신의 원래 위치를 기준으로 배치한다.
top, right, bottom, left를 이용해서 위치를 조절할 수 있다.

div{
	position : relative;
    top : 20px;
    left : 50px;
}

👉 현재 자신의 위치 : 기본값인 static의 위치로 가장 위쪽, 가장 왼쪽.
∴ 가장 위쪽에서 20px, 가장 왼쪽에서 50px만큼 떨어진 위치에 박스가 생성된다.

3. absolute

: relative와 마찬가지로 top, right, bottom, left를 이용해서 위치를 조절할 수 있다.
부모가 없다면 화면의 좌측 상단을 기준으로 배치된다.
부모가 있다면
부모 요소가 static일 때 구속되지않고 독립적으로 위치를 설정할 수 있다.
하지만, 부모 요소의 position이 static이 아닐 때는 가장 가까운 부모의 위치를 기준으로
위치가 배치된다.

① 부모 요소의 위치가 설정되어 있지 않을 때 (기본값)
-html-

    <body>
        <div class = "box1"> <!--parent-->
            <div class = "box2"></div> <!--child-->
        </div>
    </body>

-css-

.box1{
	height : 50px;
	width : 500px;
    background-color: aqua;
}

.box2{
	position : absolute;
	right: 200px;
	height : 200px;
	width : 200px;
	background-color: blue;
}


👉 부모 위치에 구속받지 않고 오른쪽에서 200px만큼 떨어진 곳에
자식인 파란색 박스가 생성된 것을 알 수 있다.

② 부모 요소의 위치가 설정되어 있을 때
-html-

    <body>
        <div class = "box1"> <!--parent-->
            <div class = "box2"></div> <!--child-->
        </div>
    </body>

-css-

.box1{
	position : relative;
	height : 50px;
	width : 500px;
    background-color: aqua;
}

.box2{
	position : absolute;
	right: 200px;
	height : 200px;
	width : 200px;
	background-color: blue;
}


👉 부모 요소에 구속되어 부모인 아쿠아색 박스에서 오른쪽으로 200px만큼
떨어진 곳에 자식인 파란색 박스가 생성된 것을 알 수 있다.

4. fixed

: 뷰포트(화면 전역)을 기준으로 배치한다.
위치를 고정시켜주는 역할을 한다
-> 스크롤으로 화면을 내려도 fixed 포지션인 요소는 움직이지 않고 고정된다.

출처 : 코딩 커뮤니티- 코뮤니티 카페(모각코 과정)

Javascript : Javascript의 사용 목적

Javascript : 웹 브라우저와 사용자가 상호 작용을 할 수 있게 해주는 도구이다.
html만 사용하면 웹 페이지 사용시 수정이 불가능하지만
Javascript를 사용하면 웹 페이지 사용 중에 사용자와 상호 작용하여
html 문서를 수정할 수 있다.

👉 목적 : 웹 브라우저와 사용자의 상호 작용을 위해 사용

Javascript : html에 javascript 연동하는 방법

: html 문서에서 script 태그를 추가하여 그 안에 자바스크립트를 작성하면 된다.

<body>
  <script>
    자바스크립트 코드
  </script>
</body>

Javascript : 이벤트(Event)

Event : Javascript와 사용자의 상호작용으로, 웹 브라우저 안에서 일어나는 사건들

  • 버튼 클릭했을 때 경고창 뜨게 하기
<body>
	<input type="button" value="hi" onclick="alert('hi')">
</body>

👉 hi 버튼이 생성되고 눌렀을 때 경고창이 뜬다.

컴퓨터는 onclick에 있는 자바스크립트 코드를 기억했다가
사용자가 hi 버튼을 클릭하면 자바스크립트 코드를 그때 실행한다.

👉이때 이벤트 : 사용자가 hi 버튼을 클릭한 것

  • 웹 브라우저에서 일어날 수 있는 이벤트들 -> 'on'으로 시작
  1. onclick="자바스크립트 코드" : 클릭했을 때
  2. onchange="자바스크립트 코드" : 글씨를 입력해서 내용이 변했을 때
  3. onkeydown="자바스크립트 코드" : 키를 눌렀을 때
  4. onmouseover="자바스크립트 코드" : 마우스를 올렸을 때
    ...
    등등 여러가지가 있다.

Javascript : 콘솔(console)

따로 html 파일을 만들지 않아도 javascript 코드를 콘솔을 사용해서 실행할 수 있다.

웹페이지 -> F12 or 우클릭 후 검사 -> console에서 javascript 코드 실행
웹페이지에서 콘솔로 javascript를 실행하면
웹페이지 안에 삽입되어 있는 자바스크립트인 것처럼 행동한다.

👉 자바스크립트를 사용하는 목적은 웹사이트를 만드는 것도 있지만
이처럼 콘솔을 사용하여 현재 만들어진 웹사이트에서
자바스크립트 코드를 작성하여 뭔가를 해결하려는 목적도 있다!

Javascript : 변수와 대입연산자

~var X = 1에서 'X'는 변수, '='은 대입 연산자!

  • 변수를 만들때 앞에 var을 붙이는 게 좋은 습관이다! (variable의 약자)

22.01.09 수정 : var은 ES6 버전 이후 부터 거의 쓰지 않는다고 한다.
var대신 let과 const쓰기!

Javascript : 제어할 태그 선택

javascript를 사용하여 body 태그에 css 요소 추가하기

(웹페이지 다크모드 만들기)

  • 웹 브라우저에게 태그를 선택하도록 하는 javascript 문법
    : document.querySelector("selector");
  1. 일반 태그 선택 -> document.querySelector("태그명");
  2. 클래스 선택 -> document.querySelector(".class명");
  3. id 선택 -> document.querySelector("#id명");

👉 css에서 선택하는 것과 같다! (css에서 클래스 호출할 때 .class명으로 호출)

-html-

<body>
	<input type=”button” value=”night” onclick=”
        document.querySelector(”body”)
	”>
</body>

👉 이렇게 onclick 이벤트에 javascript 문법을 넣어주면 웹 브라우저가
body태그를 선택한다.

이때 웹브라우저가 태그를 선택했으므로 그 태그에 css의 스타일을 넣어야한다.
👉 document.querySelector("body")뒤에 .style.스타일속성 추가


  • 스타일 속성(Javascript)
    css에서는 배경색 속성이 background-color : red;
    하지만 Javascript에서는 backgroundColor = "red";이다.
    '-'도 사라졌고, C도 대문자가 되고, red에 ""도 생긴다.

👉 이처럼 css 속성과 형태가 다르니 css 속성으로 쓰지 말기!


document.querySelector("body").style.background-Color = "black" 추가
document.querySelector("body").style.color = "white" 추가 (글자색)

<body>
	<input type=”button” value=”night” onclick=”
        document.querySelector(”body”).style.background-Color = "black"
        document.querySelector(”body”).style.background-Color = "white"
	”>
	<input type=”button” value=”day” onclick=””
</body>

👉 배경색이 검은색이 되고 글자색이 하얀색이 되는 다크모드 완성!

분명 11시에 작성 시작했는데 12시가 돼버려서 29일이 됐다..
그래도 TIL 1일차로 할거다! ㅎㅎ,,
TIL 첫 시작 성공!

스프링 부트 프로젝트(레스토랑 예약 사이트 만들기)- 가게추가-2 15강 해석
2장 스프링 코어(DI, AOP) - AOP

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage