Escape

코드카데미 과제로 홈페이지를 만드는 게 있었는데, 그냥 깔끔하게 무시하고 어차피 이 과제가 끝나면 JS로 들어가다보니 개인적으로 구상하고 있던 Chrome extension을 만들기 위한 landing page 제작에 바로 들어가기로 했다. 서비스의 이름과 로고부터 정하려고하니 Figma나 Canva를 이용하는 것이 좋을 것 같아서, 많이 들어본 Figma를 간단하게 학습한 후 아무렇게나 휘갈겨서 로고를 만들었다. 개인 프로젝트 주소 https://kimhajoon.github.io/reedio.github.io/ Reedio Make Youtube videos more comprehensive This service gives you a real-time translated subtitles on ev..

사용 환경에 따라 달라지는 뷰포트의 크기를 위해서 우리는 Meta tag를 활용한다. head 안에 삽입하여 사용하고 다음 예시와 같다. Meta tag the meta tag () is used to instruct the browser on how to render the webpage’s scale and dimensions attribute로 받는 것들은 the name="viewport" attribute: tells the browser to display the web page at the same width as its screen the content attribute: defines the values for the tag, including width and initial-scale ..

Font-family font-family로 폰트를 바꿀 수 있다. 여러 어절로 된 폰트의 경우 인용구 " " , ' ' 를 활용하여 표기한다. Web safe font를 활용하여 여러 브라우저에서 활용되는 범용성있는 폰트를 사용할 수 있다. fall back 폰트라고 해서 만약 폰트를 이용자가 사용할 수 없는 종류의 폰트라면 , 첫 번째가 아닌 두번 째 세번째 기입된 폰트를 자동으로 사용하게 한다. 예시) font-family : Caslon, Georgia, 'Times New Roman'; 비슷한 종류의 폰트를 나열해 놓으면 된다. 위와 같은 일련의 폰트 무리를 font stack 이라고 한다. 브라우저에서는 Caslon을 먼저 시도해보고, 안되면 조지아 그것도 안되면 마지막인 Times new r..

Hex 컬러란? 위의 양식처럼 표현된 것이 Hex 컬러이다. hexadecimal 이라고 하는 16진수를 바탕으로 표시된 것이며 RGB와 대응하여 사용할 수 있다. 두글자씩 묶여서 rgb로 대응시킬 수 있다. 00에서 FF까지 총 16가지(0~15)로 표현하고, 위의 그림에 표시된 경우처럼 중복된 두문자 혹은 숫자가 연속되어 쓰이면 해당 숫자 및 문자는 하나만 써서 간략하게 쓸 수도 있다. 예시 #FFFFFF -> #FFF #00FFFF -> #0FF #000000 -> #000 HSL (hue, Saturation, Lightness) Hue는 위 색상환에서의 색상을 결정 Saturatino은 채도, 0이 될수록 회색빛이고 파스텔톤으로 바뀜 Lightness는 명도로 클수록 밝아지고 , 숫자가 작을수록..

먼저 Block level element 와 Inline element에 대해서 모르고 있었는데, MDN을 통해 알게되었다. 간단하게 요약하면, Block level 요소들은 P와 같이 적용되면, 그 것이 속한 부모요소의 범위에 영향을 미치는 종류이고(배경색을 지정해보면 박스처럼 구분됨) 반대로 inline 요소들은 span처럼 지정된 요소자체에만 영향을 미치는(흔히 사용하는 하이라이트 기능처럼 해당 요소에만 영향을 줌) 요소이다. CSS는 HTML을 디자인적으로 조절해주는 역할도 있지만, 동시에 어떤 순서로 HTML을 배치하게(position) 할 것인지에 대해서도 지정해주는 역할도 한다. position display z-index float clear 다섯가지의 property를 이용해 진행된다. ..

이전에는 HTML, CSS의 기초에 대해 설명 이번에도 기초적인 내용이지만, Visual Rule 파트. 먼저 Font Family부터 Opacity Text align 등의 기본적인 font 관련 내용을 요약하고 그 다음에 Box model에 관한 설명 Font Family Web safe fonts 라는 것을 사용하는것이 권장되고, 그것이 없으면 브라우저나 os에 따라 표시가 되지 않는 폰트가 있을 수 있음. 우리가 흔히 말하는 폰트, ~체가 Font Family임 , 만약 폰트의 이름이 두 어절이라면 ""를 사용해 묶어서 표기해야함. 구문) font-family: Font weight bold 등 글자 굵기 지정 Text align left 좌측 정렬(parent element 기준으로함) cent..

HTML의 기초적인 부분들을 정리한 것이 대략 3-4 개의 포스팅으로 요약되었다. 이제는 CSS 진도로 넘어간다. CSS Anatomy inline CSS / rulese CSS 가 있는데, 인라인은 말그대로 html 코드에 직접 삽입해서 적용하는 방법의 css이고 ruleset은 css 독자적인 파일을 활용해서 적용하는 것으로 이해하고 있다. Internal Stylesheet html 코드 안에 style 태그를 활용하여 만들어진 구역, 이 기능덕에 한줄한줄 inline으로 다 수정할 필요없이 일괄적용이 가능해짐 . 다만 이게 최선의 방법은 아님 ,이후에 설명됨 구조는 ruleset을 활용하는 것으로 기본적인 ruleset의 선언은 아래와 같다. 그 밑에는 실제 예시이다. head 태그 안에서 사용되..