[TIL-104] 위코드 3일차: JS replit 1~7 / HTML&CSS wrap-up

Javascript

 

약속어

개념

console.log()나 alert()처럼 자바스크립트에 기본적으로 존재하는 함수가 있다. 이런 함수를 정의하는 데 쓰인 단어는 약속되어있다고 하여, 약속어라고 한다. 이미 존재하기 때문에 console이나 alert라는 이름로는 새로운 함수를 만들 수 없다.

 

 

매개변수와 인자

개념

함수를 선언할 때 함수 이름 옆 () 안에 매개변수(parameter)를 써두면 함수를 실행할 때 그 자리를 통해 외부의 값을 받아올 수 있다. 이로써 외부의 값을 매개변수로 저장하여 함수 안에서 다른 변수와 같은 방식으로 사용하여 코드를 작성할 수 있다. 그리고 함수가 실행될 때 () 안에 실제로 들어오는 값, 즉 외부에서 받아온 이 값을 인자(argument)라고 부른다. parameter와 argument로 이름이 서로 다른 것은 알고 있었지만 한국어로는 모두 인자라고 부르고 있었는데 "매개변수"라는 표현을 새로 알게 되었다.

사용법

//여기서 괄호 안의 parameter는 매개변수
function practice(parameter) {
	return parameter + 1;    //함수의 바디 안에서 parameter가 매개변수로서 사용됨.
}

//여기서 괄호 안의 10은 인자
console.log(practice(10));   //콘솔에는 11이 출력될 것.

 

 

num++/num--

개념

num이라는 변수가 있을 때, num++은 num = num + 1 이라는 뜻이다. 마찬가지로 num--는 num = num - 1 이라는 뜻이다.

사용법

let num = 1;

num++;
console.log(num);	//콘솔에 2가 출력됨.

num--;
console.log(num);	//콘솔에 1이 출력됨.

let newNum = num++;
//let newNUm = num;과 num++;이 순서대로 실행되는 셈.
console.log(num, newNum);	//콘솔에 2, 1이 출력됨.

[10줄 참고] 주의할 점은, num++을 새로운 변수에 할당하면 num에 1이 더해진 값이 아니라 num이 할당되고 그 후에 num의 값은 1이 더해져 업데이트된다는 점이다. newNum에 num++ 값을 할당하고 싶으면 let newNum = ++num; 이라고 써야 한다. 참고로 이때도 num의 값은 마찬가지로 1이 더해져 업데이트된다.

 

 

문자열과 숫자 결합

개념

문자열과 숫자는 결합하면 무조건 문자열이 된다. 그리고 왼쪽에서부터 순서대로 실행되기 때문에 문자열 + 숫자1 + 숫자2는 문자열'(문자열 + 숫자1) + 숫자2가 되므로 문자열'' 이 된다. 예를 들어, "2 더하기 2는 " + 2 + 2 는 "2 더하기 2는 22"가 된다.

 

 

---

HTML & CSS

 

box-sizing

개념

요소(box)의 크기를 결정할 때, 어떤 기준을 따를지 설정할 수 있는 CSS property이다.

• 기본값은 content-box로, 요소의 내용이 차지하는 크기를 따르며 width나 height를 부여해도 padding이나 border이 추가됨에 따라 최종적인 요소의 크기는 달라진다. 그래서 요소의 크기를 예상하려면 content의 부피와 padding 및 border의 부피를 모두 계산해야 하는 불편함이 있다.
• 이런 불편함을 해소하기 위해 border-box를 사용한다. width와 height를 부여하면 border, 즉 테두리까지의 크기를 고정시킨다. padding이나 border은 고정된 크기 안에서 테두리의 안쪽 방향으로 추가된다.
  • 프로젝트를 시작할 때, 모든 요소(*)에 대해 border-box로 해두는 것이 좋다.

 

 

레이아웃: 전체 브라우저 화면 안에서 가운데 정렬하기

1. flex

<section> 태그 등으로 묶인 내용을 다시 flex box로 감싸서 justify-content와 align-items 속성을 이용하여 수평, 수직 방향 모두 가운데로 정렬한다.

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  //해당 요소는 원래 자식 태그가 차지하고 있는 부피만큼을 갖기 때문에
  //높이를 100vh(브라우저 화면에 보이는 높이)로 해줘야 전체 화면 비율 안에서 가운데로 정렬될 수 있다.
}

 

2. grid

 

같은 상황에서 flex 대신 grid를 사용할 수 있다. 이때는 place-items 속성을 사용하여 수직, 수평 방향을 동시에 가운데로 정렬한다.

.wrapper {
  display: grid;
  place-items: center;
  height: 100vh;
}

 

3. position

flex와 grid를 사용하는 방법과 달리 정렬될 자기 자신의 위치를 가운데로 보내는 방식이다. 이동의 기준이 될 부모태그에 relative position을 주고, 이동할 자식 태그에 absolute position을 준 뒤 top, left 속성을 이용해서 50%에 위치시켜주면 된다.

//section 태그를 div로 한번 더 감쌀 필요 없이
//바로 상위 태그인 body 태그에 스타일을 적용하는 방법도 있지만 권장하지 않음.
.wrapper {
  position: relative;
}

//꼭 sectioin 태그를 쓸 필요는 없다. div 남용을 줄이고 시맨틱 태그를 이용하기 위함.
section {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

그런데 요소는 이동할 때 자기 영역의 중앙이 아니라 왼쪽 상단 꼭지점을 기준으로 움직이므로 50%씩 움직이면 요소가 가운데에서 조금 치우치게 된다. 따라서 transform 속성을 이용해서 자신을 기준으로 x축, y축 모두 -50%씩 이동시켜줘야한다.

 

 

text-align

개념

text와 같은 inline 요소들의 정렬을 모두 통제하는 CSS 속성이다. 그래서 다양하게 사용할 수 있다. 어째 가운데 정렬하고 싶을 때 이미지나 다른 태그에도 사용했더니 작동했는데 이유를 찾았다!

 

 

flex

개념

display: flex 일 때 그 안의 요소들에 대해 사용할 수 있는 속성이다. flex의 값은 플렉스박스 안에서 해당 요소가 차지하는 너비의 비율이다. 따라서 flex 박스 안의 요소들에게 flex 값을 부여하면 모든 요소들의 flex 값 총합에 대한 각 flex 값의 비율만큼 영역이 할당된다.

사용법

.wrapper {
  display: flex;
}

.first {
  flex: 2;
}

.second {
  flex: 7;
}

.third {
  flex: 1;
}

위와 같이 flex 값을 부여하면, 각 자식 요소(.first, .second, .third)는 <div>(.wrapper)의 전체 영역에 대해 개별 flex(2 or 7 or 1) / 총합(2+7+1=10) 만큼 차지하게 된다.

 

 

input에서 outline

개념

input에서 border과 같은 테두리가 아니라 클릭되어 포커싱되었을 때 나타나는 테두리이다. 기본적으로 나타나는 border은 없지만 클릭되었을 때는 outline이 보이게 할 수도 있다.

 

---

보충

 

연결자

개념

css의 선택자 사이의 관계를 연결해서 보다 구체적으로 선택자를 지목할 수 있게 해준다.

• 자손 선택자 : 공백(space)으로 나타낸다. 예를 들어, div span 이라고 쓰면 div 태그 안에 있는 모든 span 태그가 선택된다. 직계 부모-자식 관계가 아니어도 가능하다.
• 자식 선택자 : > 기호로 나타낸다. 예를 들어, div > span 이라 쓰면 div 태그 바로 아래에 직계 자식 관계인 span 태그들이 선택된다.
• 인접 형제 선택자 : + 기호로 나타낸다. 예를 들어, div + span 이라고 쓰면 div 태그와 같은 부모를 둔 형제 태그 중에 div 태그 바로 다음에 오는 태그가 선택된다.
• 일반 형제 선택자 : ~ 기호로 나타낸다. 예를 들어, div ~ span 이라고 쓰면 div 태그와 같은 부모를 둔 모든 형제 태그들이 선택된다.

참고

CSS 연결자(Combinators) http://jun.hansung.ac.kr/CWP/css/CSS%20Combinators.html

TIL-23

 

태그가 특정 상태일 때를 나타내는 선택자

개념

어떤 태그가 특정 상태일 때는 element:status 방식으로 나타낼 수 있다. 그런데 해당 상태일 때 당사자 태그 말고 다른 자식 태그에 대해 스타일을 적용하고 싶을 때, element:status 바뀔element 방식으로 나타낼 수 있다. 예를 들어, div:hover span이라고 하면 마우스가 올라간 상태의 div 태그의 자식인 span 태그가 선택된다. 공백을 통해 자식 관계가 결합된 것이다.