본문 바로가기

전체 글125

네이버 부스트코스 JS Javascript 제어문 프로그래밍 js는 프로그래밍 언어이다. 프로그램은 순서라는 뜻이다. 프로그래밍이란 순서를 만드는 행위를 말한다. 즉, 프로그래밍 언어란 시간에 순서에 따라서 실행되어야 할 행위가 있고 이를 글로 표현한 것을 말한다. 이것을 컴퓨터가 읽고 실행하는 것이다. html은 정적이라 한 번 만들어지면 변하지 않는다. 따라서 프로그래밍 언어가 아니다. 하지만 js의 경우 동적이고 사용자와 상호작용하기에 프로그래밍 언어라 부를 수 있는 것이다. 조건문이란? 조건문이란 조건에 따라 다른 기능들이 다른 순서에 따라 실행되도록 만드는 것이다. if/else를 이용해 조건문을 생성할 수 있다. 비교 연산자와 불리언 js에서 가장 많이 쓰이는 비교 연산자는 ===이다. 왼쪽과 오른쪽이 동등한 지 물어보는 연산자이다. 이때 결.. 2021. 3. 27.
네이버 부스트코스 JS 웹과 Javascript Javascript란? Javascript는 웹 페이지를 동적으로 만들어준다. 뼈대를 html로 만들어도 정적이라 단편적인데 js를 이용하면 사용자와 상호작용할 수 있다. 대표적인 예로는 야간모드가 있다. js를 이용해 뒷 배경을 검은색으로 글씨는 하얀색으로 바꾸는 야간모드를 설정할 수 있다. 사용자와 상호작용하는 대표적인 예라 할 수 있다. Javascript와 html Javascript는 html과 어떻게 같이 쓰일까? 다른 언어라 따로 쓰일 줄 알았는데 html의 안에 작성할 수 있었다. style 태그를 이용해 html의 head에 들어갔던 css와 비슷하게 Javascript는 script 태그를 이용해 html의 body에 작성된다. html과 Javascript은 겉보기에는 똑같이 출력된다.. 2021. 3. 27.
네이버 부스트코스 CSS 미디어쿼리 미디어 쿼리 미디어 매체에 따라 다른 스타일을 적용할 수 있게 만든다. 점점 웹이 발전함에 따라 다양한 매체에 대응해야 했기에 미디어 쿼리를 사용하게 된다. 컴퓨터, 태블릿, 스마트 폰 등 매체에 따라 반응형 웹이 존재하는데 미디어 쿼리를 이용해 제작할 수 있다. 미디어 쿼리를 실행하기 위해서는 @media 미디어쿼리구문 {} 방식으로 적어주어야 한다. 미디어 쿼리를 나누어보면 미디어 타입과 미디어 특성이 있다. 둘 다 많은 내용이 있지만 가장 많이 쓰이는 것만 알아보자. 미디어 타입에서 알아두어야 할 속성은 all, print, screen 정도이다. 그 중에서도 screen이 대부분이다. 화면 출력하는 디스플레이가 있는 미디어들은 거의 screen이기 때문이다. 미디어 속성에서 알아두어야 할 속성은 .. 2021. 3. 23.
네이버 부스트코스 CSS 레이아웃 display 요소의 박스 유형을 결정한다. 속성 값에는 none, inline, block, inline-block이 있는데 각 이름대로 렌더링 된다. inline과 inline-block의 경우 하나씩 더해줄 때마다 옆으로 늘어나는데 block은 행 전체를 자치하기에 밑으로 늘어난다. 그리고 inline과 inline-block은 개행에 영향을 받으므로 개행 시 옆의 요소와 4px 가량의 여백이 생긴다. display width height margin padding border block ㅇ ㅇ ㅇ ㅇ ㅇ inline X X 좌/우 ㅇ(설명) ㅇ(설명) inline-block ㅇ ㅇ ㅇ ㅇ ㅇ 출처: www.boostcourse.org/cs120/lecture/92936?isDesc=false vi.. 2021. 3. 22.
네이버 부스트코스 CSS 폰트, 텍스트 typography x를 기준으로 꽉 차는 부분이 ex, 폰트 전체의 영역 em. x를 기준으로 하단 라인이 baseline, baseline 밑의 영역이 descender이다. 반대로 x보다 위의 영역은 ascender. font-familiy 글꼴을 설정하는 font-familiy, familiy-name과 genetic-familiy를 이용해야 한다. family-name의 경우 사용할 글꼴을 말하는데 반점으로 구분해주고 먼저 표기될 글꼴 먼저 선언한다. 만약 표기한 글꼴이 나오지 않을 때를 대비하여 genetic-familiy를 설정한다. 태그의 가장 마지막에 작성하고 대표적으로 sans-serif와 serif가 있다. serif는 삐침이라는 뜻이다. 명조체처럼 끝이 삐친 글자이면 serif 체이.. 2021. 3. 22.
네이버 부스트코스 CSS 단위, 배경, 박스모델 단위 단위는 절대 길이와 상대 길이가 있다. 절대 길이에는 px과 pt가 있는데 pt의 경우 윈도우와 맥이 차이가 있기에 웹 개발 시 권장하지 않는다. 브라우저 호환에 유리한 px를 주로 사용한다. 상대 길이에는 %, em, rem, vw가 있다. 이 중 많이 쓰이는 em의 경우 글씨 크기를 조절할 수 있었다. 1em=16px이어서 만약 20px이면 16px로 나누어본다. 1.25em이 값이 된다. 소수 셋째 자리까지 표시할 수 있다. 색상 색상값은 다양하게 선언할 수 있다. 컬러 키워드 미리 정의된 컬러 이름으로 표현하는 방법. 어떤 색이 나올까요? 16진법 #RRGGBB 앞 두 자리는 적색 가운데 두자리는 녹색 마지막 두자리는 청색을 의미한다. 어떤 색이 나올까요? #RGB 3자리로 축약하여 사용할 .. 2021. 3. 21.