개발자의 낙원

HTML 삽입 미리보기할 수 없는 소스 label(라벨 = 레이블) 태그의 기능 HTML의 label 태그는 이름 그대로 라벨 역할을 합니다. 폼(form) 내부에서 해당 폼의 조작을 담당하는 태그의 이름표로 쓰입니다다. 예시코드) 타겟에대한 정보 *for 속성에 라벨링 할 태그의 id를 집어넣습니다. label 태그를 사용하는 이유 1. self-closing 태그의 용도를 분명하게 보여줍니다. 위의 input 태그는 셀프-클로징(self-closing) 태그입니다. 셀프-클로징 태그는 다른 HTML 태그와 다르게, 내부에 다른 태그를 넣거나, 텍스트를 삽입할(innerText) 공간이 존재하지 않습니다. 바로여기가 innerHTML, innerText 그래서 해당 태그는 그 자신에 대한 정보를 제공하..

html 요소는 다음과 같은 css 코드를 통해 인라인 (inline)과 블록(block) 요소의 성질을 모두 갖게 설정할 수 있다. display: inline-block; 이렇게 지정된 인라인블록은 기존의 인라인처럼 다른 것들과 수평적으로 나란히 배치할 수 있다. 또 블록처럼 너비와 관련된 속성값을 설정할 수도 있다.(margin, height, width) block: 수평선을 혼자 차지하는 HTML태그 ex) , , ... , .. 등 inline: 수평선에 다른 요소가 같이 위치할 수 있는 HTML 태그 ex) , , , .. 등 블록을 인라인블록으로 바꿔보자 div 태그는 같은 수평선 안에 다른 html 요소가 올 수 없는 대표적인 block 태그이다. html코드 .baby { margin:..

Select(셀렉트) 태그 개념 이름 그대로 선택목록을 만드는 태그이다. 아래의 드롭다운 리스트가 브라우저가 표현한 셀렉트 태그의 모습이다. HTML 삽입 미리보기할 수 없는 소스 셀렉트 태그는 자신의 내부에 여러 개의 옵션(option) 태그를 포함하는 형식으로 작성한다. ul, ol 태그가 li 태그를 포함하는 것과 같은 구성이다. 위에서 본 드롭다운 리스트의 HTML 코드는 다음과 같다. JavaScript TypeScript HTML 주요 속성 (Attribute)들 disabled: 옵션목록을 비활성화시킨다. 목록을 유저가 보거나 고를 수 없다. 비활성화된 모습 HTML 삽입 미리보기할 수 없는 소스 form: 이 드롭다운 리스트를 연결할 폼을 지정해 주는 속성 폼의 아이디를 적어넣어주면된다. ..

많은 프로그래밍 언어들이 snake_case, camelCase, PasckalCase 등 저마다의 명명규칙을 가지고 있는 것처럼 HTML 에도 명명규칙이 있다. 왜? html 태그도 id와 class를 통해 관리하니까 쉽고 직관적인 네이밍이 중요하기 때문이다. 가장 대중적인 html 클래스 명명법, BEM에 대해 알아보자. BEM: Block Element Modifier BEM, 뱀은 블록 엘리멘트 모디파이어의 축약어로 HTML 요소들을 block과 그에 포함된 element로 구분하고 거기에 적용시킬 개별적 디자인 특성을 modifier로 구분해서 클래스명을 지어주는 규칙이다. BEM 표기법을 사용하는 유저들은 html의 id속성은 사용하지 않는다. 오로지 class만을 사용한다. 왜? select..

실시간 화상채팅을 하기 위한 예시 영상을 업로드하기 위한 예시 This browser doesn't support video 이 브라우저는 동영상 재생을 지원하지 않습니다. Attribute (속성) autoplay: 자동재생 비디오가 페이지에 로드되자마자 자동으로 재생되게 하는 속성 요즈음에는 마우스 커서를 올렸을 때, 임시 재생화면을 따로 제공하는 게 유행이라 웹페이지에서는 잘 쓰이지 않는다. 하지만 web으로 구동되는 실시간 영상통화 어플에는 여전히 유용하다. controls: 조작패널 유저와 상호작용하기 위한 기본 조작 ui를 추가하는 속성. 재생, 정지, 볼륨조절, 재생장면 이동 등의 기능을 제공한다. loop: 루프 영상재생이 끝났을때 다시 처음부터 재생하게 하는 속성 muted: 침묵 영상의..

공부동기 지난주부터 자바스크립트를통해 DOM등을 이용해 HTML요소를 조작하는방법을 공부하고 있다. 이중에 자바스크립트가 querySelector를 통해 HTML에 접근할때, 인자를 CSS 선택자로 받아들이는것을 보고 한번쯤은 CSS 선택자를 정리할 필요를 느껴 포스팅을 작성한다. 이 글의 목차 1. CSS개념: HTML요소 스타일링하기 2. 기본 CSS 선택자 3. CSS 선택자 우선순위 4. CSS 선택자 결합하기 1. CSS개념: HTML요소 스타일링하기 목차로 돌아가기 CSS (Cascading Style Sheets)란? CSS는 HTML과 같은 웹페이지 문서의 디자인에 사용되는 언어이다. Cascading은 상하식, 계단식이란 뜻이다. CSS를 사용하여 디자인을 지정하는 HTML, XML, X..

Ui design icons created by Smashicons - Flaticon Box Theory? 웹개발에서, HTML element(요소)들은 전부 직사각형이 겹겹이 쌓여있는 박스로 취급하여 다루는 기법이다. 박스 찾아보기 구글크롬의 "개발자 도구" 기능을 이용하여 웹을 구성하는 코드를 포함한 여러 요소를 살펴볼 수 있다. box이미지모델은 style코드 최하단부에 위치한다. 또, 크롬의 확장프로그램 pesticide를 통해. 웹페이지 요소들의 박스들을 한눈에 볼 수 있다. pesticide링크 Box의 구성요소 content(콘텐츠, 내용물): 박스가 담고있는 실제 HTML element. 가장 안쪽에 위치한 박스이다. padding(패딩, 충전재): content와 border사이의 공간..

True icons created by Freepik - Flaticon Media? Query? Media: 중간 매개물. 매체 Query: 질문 Media Query(미디어쿼리)? 웹에 접근하는 Media(기계 혹은 뷰포트)의 특성에 따라, 다른 스타일을 적용 할 수 있게 해주는 CSS 기술 CSS의 조건문이라고 생각하면 편하다. responsive(반응형) 웹사이트를 만드는데에 널리 이용된다. 형태 @media media-type and (expression){ } 예시 @media screen and (max-width: 600px){ h1 {font-size: 200px; } div { position: absolute; } } media가 screen이며 너비가 600px 이하인경우, h1의 ..

Html icons created by Pixel perfect - Flaticon HTML: Hyper Text Markup Language 하이퍼텍스트 마크업 언어 하이퍼 텍스트: 인터넷에서 사이트끼리 접속을 매개해 주는 링크 마크업: Tag(태그)들의 집합 Tag: 요소의 배치방식이나 요소간 관계등의 특징을 정의하기 위한 도구. html은 요소의 앞과 뒤에 태그를 붙여 특징을 정의한다. ex) 요소 앞에 있는 태그를 opening tag(여는 태그), 뒤에 있는 를 closing tag(닫는 태그)라 한다. 단일 태그로 존재하는 요소 : 줄바꿈태그. 앞뒤 태그가 따로 존재하지 않는다. 태그속성(attribute) 태그에 포함되는 문자를 "속성"이라 한다. 각 요소들의 행동 및 배치구조를 나타내기 위..

Grid(그리드)? 평행선과 수평선으로 이루어진 격자구조의 요소. 일반적으로 row(행): 가로줄과 column(열): 세로줄로 구성된다. 구글 크롬 시작화면의 웹페이지 아이콘 링크들도 일종의 그리드 배치로 볼 수 있다. ( HTML 소스는 안 까봐서 저게 실질적인 어떤 라이브러리의 그리드 구조인지는 모른다.) 부트스트랩에서는 responsive(반응성이 있는) 그리드를 제공해 준다. 이 말은 웹페이지 방문자가 사용 중인 기기의 화면크기, 혹은 브라우저의 크기에 반응하여 요소들의 배치가 자동으로 번경됨을 뜻한다. 크롬을 통해 예시를 살펴보자 크롬브라우저의 가로길이를 늘리자, 한 행에 배치되어 있는 아이콘의 개수가 3개에서 5개로 늘었다. 부트스트랩이 반응하는 화면 사이즈 표 출처 : 부트스트랩 그리드 d..