# em
[CSS] CSS 수치 값 표현(px, %, em, rem, viewport)
CSS의 속성(수치) 값을 표현하는 방법 픽셀(px) 디지털 세계에서 일반적인 측정 단위 페이지가 출력되는 화면의 크기(브라우저 창의 크기, 모니터 화면의 크기 등)가 달라져도 컨텐츠의 크기가 고정된 값으로 유지됨. font-size의 기본값 16px 4K 화면 -> 3840 x 2170 픽셀 퍼센트(%) 부모 요소의 공간 기준 상대적 크기의 비율 (부모가 body일 경우 화면의 크기) em 기준이 되는 font-size X em 배수를 계산하여 px로 표현됨 기준이 되는 font-size : 해당 단위가 사용되고 있는 요소(element)의 font-size. 만약 font-size가 정의되지 않은 경우 부모의 font-size를 상속받음. CASE 1 <img src="https://velog.velcdn.com/images/yang7134/post/ec15b818-3ea7
HTML, CSS 230717
~ 오늘은 8일차 ~ - 목차 1. HTML 2. CSS + 복기일기 1. HTML Hyper Text Markup Language 웹 페이지 표시를 위해 개발된 지배적인 표준 마크업 언어 콘텐츠를 삽입할 수 있게 해주는 요소들로 구성된 지극히 간단한 언어 웹을 이루는 가장 기초적인 구성 요소 (1) 구성요소 ① tag : 웹 문서를 구성하는 명령어 ② Element : 시작태그와 종료태그, 그 사이의 내용으로 구성 ③ Attribute : 태그를 보조하는 명령어 ④ Attribute Value : "" 부분에 들어갈 값 (2) Element >① Empty Element 내용없이 구조적인 기능만 하는 요소 ex >② Block Element 다른 블록 요소 포함 가능 *
[F-Lab 모각코 챌린지 44일차] CSS 단위 (px, %, vh, vw, em, rem)
CSS 단위 CSS 단위들은 웹의 다양한 상황에 적용되며, 각각의 특성과 사용 방법을 이해하고 적절히 활용하는 것이 중요하다. Pixel px pixel은 CSS에서 가장 일반적으로 사용되는 단위. 화면에 표시되는 가장 작은 단위 모니터나 디바이스 화면 해상도에 따라 크기가 다르게 표현된다. 크기, 여백, 경계선 등의 다양한 요소를 정확하게 제어하기 위해 사용된다. 고정된 크기를 가지고 다른 요소들과의 상대적인 크기를 지정할 수도 있다. 고정 크기 요소 특정 요소의 크기를 정확히 제어하고 싶을 때 사용된다. 예로, 로고 이미지의 크기 혹은 버튼 크기 등. 정렬 및 여백 요소들의 정렬이나 여백을 설정할 때 사용한다. 예로, **요소들 사이의 간
0712/HTML
HTML Basic Tag Visual Studio Code 지원 기본 html 문서 타입을 위한 태그 일부 태그를 제외한 모든 태그는 열어준 후() 닫아야 함() html의 주석 태그는 위와 같으며, ‘ctrl+/’로 생성 가능 단축키로 생성 시 같은 줄에 존재하는 모든 코드가 주석으로 처리됨에 유의 Header header는 1~6까지 있으며 제목 작성 시 사용하며, <h1></h1>이 가장 큰 글꼴 Preformatted <pre>는 내부의 enter, tab, space를 그대로 인식하여 출력 자동으로 tab(들여쓰기) 실행 a Horizontal Rule <hr>은 선(line) 작성 시 사용 size : 굵기 / align : 정렬 위치(left, center, right) / width : 선의 길이 Paragraph & B
예제로 정리하는 EM 알고리즘 (2)
이번 글에서는 지난 글의 끝부분에 소개된 예제를 활용해서, EM 알고리즘을 마저 이해해보자. > 이번 글은 연세대학교 박태영 교수님의 강의노트와 다음 자료를 기반으로 작성되었습니다. Allele Frequency Estimation 예제 소개 <img src="https://velog.velcdn.com/images/quriemoon/post/930ff3b3-3f67-4fbb-b570-62b85d7fec70/image.png
환경 모니터링
환경 모니터링(Enviorment Monitoring) EM은 바이오 공장에서 단일업무로는 가장 많이 해야하는 업무중 하나입니다. 반도체 공장은 더욱 까다롭겠지만 바이오 공장에서도 오염에 대한 문제는 항상 존재하며 주요 Issue 입니다. 그렇기 때문에 공장 시설(Clean Room)의 깨끗함의 정도를 계속 상시 모니터링을 하고 있어야하며 이러한 업무를 환경 모니터링이라고 부릅니다. 그렇다면 깨끗함이란 무엇일까요? 깨끗함에 대해서 국제 표준 기구(ISO)는 아래와 같이 정의 내리고 있습니다. (ISO 14644-1 깨끗함에 분류) ISO는 깨끗함을 총 9가지 Class로 나누어 생각합니다. 
예제로 정리하는 EM 알고리즘 (1)
EM 알고리즘의 유명한 예제인 'Allele Frequency Estimation' 예제를 통해서, EM 알고리즘을 정리해보자. > 이번 글은 연세대학교 박태영 교수님의 강의노트와 다음 자료를 기반으로 작성되었습니다. EM 알고리즘이란? EM 알고리즘의 목표 EM 알고리즘을 자세히 살펴보기 앞서, EM 알고리즘이 해결하고자 하는 상황이 무엇인지 먼저 살펴보자. EM 알고리즘은 결측치가 있는 데이터가 주어졌을 때, 이 데이터로부터 likelihood를 최대화하는 값, 즉 MLE를 찾는 문제를 해결하고자 한다. 그렇다면 MLE를 왜 찾으려고 하는걸까? 이를 자세히 설명하기 위해서는 MLE의 특성을 살펴봐야겠지만, 그건 이번 글에서 다루는 내용을 벗어나기 때문에 생략하고 간단하게 이야기
[CSS] px, em, rem
❓px (픽셀) px는 픽셀 단위로, 고정된 크기를 나타낸다. px 값은 사용자의 화면 해상도에 따라 정확한 크기를 가지게 된다. 주로 레이아웃이나 정확한 크기를 필요로 하는 요소에 사용된다. 예를 들어, 너비나 높이를 고정적으로 지정하거나, 특정한 텍스트 크기를 설정하는 경우에 유용하다. ❓em em은 상대적인 크기를 나타내는 단위다. em 값은 부모 요소의 크기에 따라 상대적으로 결정된다. 만약 부모 요소의 크기가 16px이라면, 1em은 16px을 의미한다. 주로 텍스트 크기를 상대적으로 조정하거나, 레이아웃에서 유연한 조정이 필요한 경우에 사용된다.
machine learning lecture 11
은닉 마르코프 모델(Hidden Markov Model, HMM)과 그 응용에 대해 알아보기 순차 데이터에서 가장 중요한 모델 중 하나인 은닉 마르코프 모델(Hidden Markov Model, HMM) HMM은 관찰 변수와 그를 야기시키는 은닉 변수들을 추정하는데 사용되는 모델이다. HMM의 구조, 알고리즘, 응용 분야 HMM을 학습하기 위해서는 먼저 HMM의 구조와 가능도 함수를 식으로 이해해야 한다. 이를 통해 은닉 변수와 관찰 변수 간의 관계를 수학적으로 모델링할 수 있습니다. HMM에서 사용되는 forward probability와 backward probability와 같은 개념을 구체적으로 이해하고 계산하는 방법을 배웁니다. 그 다음으로는 HMM을 해결하는 알고리즘 중 하나인 바움-웰치 알고리즘에 대해 학습합니다. 이 알고리즘은 EM(Expectation-Maximization) 알고리즘의 일종으로, 전이 확률과 방출 확률을 이용하여 HMM
Font Properties
코드 em 과 rem >em 의 경우, 해당 단위가 사용되고 있는 요소의 font-size 속성값이 기준이 됩니다. 반면에 rem 에서 r 은 root , 즉 최상위 요소를 font-size 속성값 의미합니다. HTML에서 최상위 요소는 입니다. em >em = 구하고자 하는 엘리먼트의 pixel 값 / 부모 엘리먼트의 font-size pixel 값 Result rem Result 
반응형 작업 - media-query 최소화하기
💡 들어가기 전에 > 현재 우리가 사용하는 대부분의 웹 사이트는 '반응형 웹'으로 제작되어 있다. 여기서 말하는 반응형 웹이란 무엇일까? 반응형 웹은 쉽게 말해서 디바이스의(화면) 크기에 따라 웹 페이지의 크기가 자동적으로 재조정되어 해당 화면에 최적화된 레이아웃을 제공하는 것을 말한다. 요즘은 태블릿, 핸드폰 등의 다양한 디바이스를 통해서 인터넷을 사용하기 때문에 모바일 웹에 대한 관심이 굉장히 많아지고, 대부분의 서비스들이 모바일 웹에 최적화된 웹 페이지를 제공하기도 한다. css media-query 반응형 웹은 css의 media-query를 통해서 쉽게 구현할 수 있다. 실제로, MDN 공식 문서에서 '반응형 디자인은 오롯이 미디어 쿼리 때문에 등장할 수 있었습니다.'라고 언급할 정도로 대부분의
CSS 단위(작성중)
- px : 픽셀 em: 요소의 글자 크기 rem : root element(html)의 글자 크기 vw : 뷰포트 가로 너비의 백분율 vh : 뷰포트 세로 너비의 백분율
[jQuery] 제이쿼리 메소드 2 (+cs 공부정리)
jQuery DOM 수정 text() 선택한 요소의 텍스트 내용을 설정하거나 반환합니다. html() 선택한 요소의 html 마크업을 포함한 내용을 설정하거나 반환합니다. val() 선택한 요소의 value값을 설정하거나 반환합니다. > 위 세 가지 메소드에는 콜백 함수가 제공되며, 이 함수는 현재 요소의 인덱스와 바로 이전에 가지고 있던 값의 매개변수를 가지고 있습니다. attr() 선택한 요소의 다양한 속성 값을 설정하거나 변경할 수 있습니다. 객체 형식으로 전달하면 동시에 복수의 속성값을 설정할 수도 있죠. attr() 메소드에서도 콜백 함수을 전달할 수 있습니다. 이 함수에는 현재 인덱스값과 바로 직전에 갖고 있던 속성값, 두 가지의 매개변수를 사용할 수 있습니다. 콘텐츠 삽입 append() 선택한 요소 내부의 끝에 내용 삽입 prepend() 선택한 요소 내부의 시작에 내용 삽입 after() 선택한 요소 외부의
HTML - 요소(텍스트)
텍스트 관련 요소 요소는 여러 종류가 있어요! 이번 포스팅에서는 텍스트에 관련된 요소들이 각각 무슨 역할을 하는지 공부해보도록 하겠습니다. 요소 사용 시 주의할 것! 텍스트 서식에 사용되는 요소들은 대부분 텍스트 효과를 가지고 있습니다. 글자 크기가 커지기도 하고, 기울여지기도 하며, 두꺼워지기도 하죠.🤔 그렇다보니 단순히 이 스타일을 적용하기 위해 해당 요소들을 사용하는 경우가 많습니다. ⚠️ 하지만 이 요소들은 각각의 용도를 가지고 있기 때문에 용도에 맞게 사용하고, 스타일은 CSS를 통해 적용해야 합니다. h1 `hea
멋사 프론트엔드 스쿨 5기 TIL - HTML & CSS - 3월 2일
헷갈리고 새로 알게된 것들 위주로 적었습니다. 📒 HTML 📌 스니펫 만들기 https://snippet-generator.app/ 📌 태그 ~ h1 태그는 한 페이지에 한 번만 사용 h1 ~ h6 순서대로 작성 👇 href와 id를 사용하여 페이지 내에서 이동하는 링크도 만들수있다. 현재 요소의 줄 바꿈 규칙을 무시하고 브라우저가 줄을 바꿀 수 있는 위치를 나타냅니다. 한국어는 word-break:keep-all속성과 함께 사용 
TIL / CSS 기초 : 단위(px, em, rem), CSS 레이아웃 구성 방법(flex, grid), font-face
✓ 2023.02.17 TIL 단위 - px, em, rem CSS 레이아웃 구성 방법 - flex, grid font-face 1️⃣ 단위 - px, em, rem (1) px (고정적인 단위) : px은 우리가 흔히 알고 있는 픽셀값을 의미한다. 즉, 해상도를 지정할 때 사용하는 단위다. 다음에서 살펴볼 em, rem에 비해 고정값 영향을 많이 받는 단위다. 많은 웹 사이트에서 px 단위를 많이 사용하긴 하지만 픽셀값을 한번 사용하면 값을 변경하기가 번거롭기 때문에 px 사용을 많이 줄이고 있는 추세다. → 반응형 웹 사이트를 만들게 된다면 px 사용은 적합하지 않을 수 있다. (2) em (가변적인 단위) : em은 px에 비해 가변적인 단위이지만 그럼에도 불구하고 관리가 어려울 수 있다는 단점이 있는 단위다. 먼저, em은 상위 요소의 폰트 사이즈에 영향을 받는 단위다. → 바로 위에 위치한 상위 요소에 영향을 받는다.
숫자 단위 - Rem | Px | Em
Pixel 픽셀 단위는 CSS의 가장 기본적인 단위이다. 픽셀 단위로 값을 입력하는 것은, 내가 원하는 값을 정확하게 이 값이라고 절댓값으로 단호하게 선언하는 것이다. 1px은 사용자 디스플레이 기기의 논리적 해상도 1pt에 대응하며, 픽셀 단위로 지정한 크기는 나중에 크기를 변경하고 싶다면, 다른 픽셀 값으로 지정해야 한다. Rem rem은 CSS3 표준에서 등장했으며, Root EM이 어원이다. HTML 루트 요소의 폰트 사이즈를 계산의 베이스로 하는 방식으로 사이즈를 지정하는 것이다. 즉, 문서의 루트(root | html)의 글자 크기에 상대적으로 글자 크기를 조정하는 것이다. 사용자가 브라우저의 기본 폰트 크기를 어떤 값으로 설정했든 간에 이에 따른 가변 텍스트 크기에 맞춰서 사이트 레이아웃이 적절히 조정될 수 있도록 하려는 것이다. 위의 설명처럼 rem 단위의 픽셀 값 변환은 html 요소의 폰트 크기에 따라 결정되는데, 단위를 직접 지정해서
[CSS] 요소의 크기 단위
CSS에서 요소의 크기를 조절하는 단위에는 여러가지가 있습니다. 오늘은 대표적으로 사용되는 몇 가지 크기 단위들에 대해서 알아보도록 하겠습니다. px 먼저 px입니다. px는 픽셀(pixel)의 줄임말로 한국어로 화소라고도 합니다. 웹 디자인에서 가장 작은 단위로 사용됩니다. px 값은 해당 요소가 화면에서 얼마나 차지하는지를 나타냅니다. 예를들어 [1920 x 1080] 모니터를 사용하는 경우 가로 1920개의 픽셀, 세로 1080개의 픽셀을 갖습니다. 디바이스의 스크린 크기에 따라서 픽셀은 제각각이기 때문에 픽셀은 절대단위이지만 다양한 기기에서 보기에는 적합하지 않습니다. 이러한 문제를 해결하기 위해 대부분의 웹 브라우저는 1px을 1/96인치의 절대 단위로 사용합니다. > 절대 단위에는 cm, mm, pt, in(인치) 등이 있으나, px를 가장 많이 사용합니다. % %는 백분율을 가지고 크기를 조절합니다. `%
CSS 속성 단위(px, em, rem)의 선택과 웹 접근성
_CSS 속성 단위 (px, em, rem) 프론트엔드 개발자라면 무조건 숙지해야할 내용 !_ ▪︎ PX (PIXEL) 고정적인 절대(absolute) 단위 하지만 디스플레이 해상도에 따라 상대적인 크기를 나타낸다. ▪︎ EM / REM 가변적인 상대(relatve) 단위 font-size 단위의 기준 1em이나 1rem은 항상 고정된 길이를 나타나지 않고, 대신 브라우저가 어떤 기준에 따라 계산을 하여 px로 변환을 해준다. 변환 기준? em과 rem의 차이점 rem에서 r은 root로 최상위 요소의 font-size 속성 값이 기준이 된다. 따라서 요소의 font-size 속성 값이 기준이 된다. em은 해당 요소의 font-size에 비례해서 크기가 결정된다. em의 문제점 ? em은 해당 요소의