HTML/CSS

태그 > HTML에서 태그는 정보의 종류를 구분하는데에 사용! 스타일 정보는 CSS로 분리가 되었다고 한다. 이 외에도 수많은 태그들이 존재한다. >Entity name 이 곳에 들어가면 HTML에서 사용되는 Entity name이 뭐가 있는지 볼 수 있다. >주석 > > 주석을 간단하게 사용하는 방법(VSCode기준) 윈도우(영어 자판):...

1. 순서가 있는 목록 ol 실행 결과 >2. 순서가 없는 목록 ul 실행결과 >용어와 정의를 나열할 때 사용되는 태그 > dl -용어와 그에대한 설명을 리스트형식으로 나타내기 위해 사용 > >dt -용어의 이름 >dd -용어의 정의 > >사용예시 실행결과

이미지 태그 img >이미지를 사용하기 위한 태그의 속성 >사용예시

태그 정리 HTML 요일 월 화 수 목 금 1교시 체육 수학 국어 국

a태그와 속성 사용예시 > address태그 주소나 연락처 정보를 포함 >사용예시 실행결과

사용되는 태그 사용예시 실행결과 >input태그의 속성 -input태그에는 입력을 받는 많은 타입들이 존재하는데, 다 사용해볼 순 없을 것 같아서 아래에 조금 사용 빈도가 있어보이는 요소 타입과 그에대한 속성들을 것들을 글로 정리해봤다. > 텍스트 관련 타입 _-text -password -search -tel_ > 텍스트 관련 속성 -placeho...

textarea 태그 label은 이전 포스트 처럼 이름을 붙이기 위해 사용되었고 for를 통해 textarea의 id와 맞춰주어 연결하였다. 아래의 사진들은 각각 cols = 30 rows = 10 / cols = 50 rows = 10 / cols = 50 rows = 20을 통해 차이점을 비교해 보았다. > 사용예시 >*select

CSS를 적용하는 세 가지 방법 >1. 인라인 스타일(inline style) : HTML 태그마다 style속성을 사용해서 CSS코드를 넣어주는 방식, 재사용이 불가능하고, HTML과 CSS의 코드가 분리되지 않아 잘 사용하지 않는다. >--- 내부 스타일 시트(in

선택자 HTML의 어떤 요소를 선택하여 적용할 것인가?를 정하는 부분 같은 선택자일 경우에는 뒤에 오는 것이 우선순위가 높다. >1. *을 붙여 모든 요소를 선택할 수 있다. > >2. 태그를 선택할 수도 있다. >3. .에다가class이름을 붙여 class를 선택할 수 있다. >4. #을 붙여 id를 선택할 수 있다. >5. ,(쉼표)를 통해서 o...

font-style normal : 보통 모양 italic : 글자를 기울여서 쓰는 모양 oblique : 글자를 쓴 뒤에 기울인 모양 initial : 기본값으로 설정 inherit : 부모 요소의 속성값을 상속받는다. 실행예제 결과 >font-weight 글자의

정렬과 간격 text-align : 텍스트의 정렬방식 지정 left: 왼쪽 center : 가운데 right : 오른쪽 justify : 양쪽 정렬 > letter-spaceing : 자간 word-spacing : 단어 간격(스페이스의 길이) line-height : 줄 높이 조절 > 사용예시 실행결과 ✏️ cm, px, em 등의 단위들의 감을 잡기...

색 표현 방식 Keyword : 색상마다 부여된 이름(yellow, green, red 등) > RGB(A) : rgba(x, y, z, a) A는 투명도를 뜻한다.(0.0 ~ 1.0사이 또는 0% ~ 100%사이 1에 가까울 수록 불투명) > HEX : #FFFFFF 16진수로 이루어진 색상코드 > > HSL(A) : hsl(색상, 채도, 명도값) / h...

div태그 여러개의 태그나 내용들을 묶어주는 역할을 한다. 줄 바꿈이 자동 적용 사각형 박스로 구역을 정한다. span태그 여러개의 태그나 내용들을 묶어주는 역할을 한다. 줄 바꿈이 자동 적용되지 않고 옆으로 쫙쫙 붙는다. 자신이 존재하기 위해 필요한 공간? 실 사용

이번에 알아 볼 내용은 padding, margin, border이다. 요소의 박스모델에는 padding, content, margin, border가 있는데, 이는 MAC기준 command+option+i키를 누른 뒤 뜨는 개발자 화면에서 왼쪽 중앙 조금 아래에 보

지난번에 width, height를 이용해서 크기를 지정해봤고 그 이전엔 %, em 등 다양한 단위를 적용할 수 있었다. 이번엔 또 다른 단위를 알아보도록 하자. 뷰포트라는 단어가 있다. 쉽게 말하자면 웹 페이지가 표시되는 영역을 뜻한다. 이 단어를 언급한 이유는 이번에 배울 요소의 크기를 정할 때 쓰이는 단위 때문이다. vw : 1vw는 뷰포트의 넓이의...

이미지를 이용해서 증명사진을 만들어보고자 했다. 우선 속성들 부터 살펴보자 background-color : 배경색상지정 background-image : 배경 이미지 지정 background-size : 배경 이미지 사이즈 설정 border-radius : 요소의 테두리를 둥글게 만들기 px같은 단위도 사용 가능 %를 이용해서 비교해 보았으나, ...

먼저 아래 코드를 살펴보자div태그에 대해서 cursor:pointer;를 설정해주었다.이렇게하면 div태그인 요소에 대해서 마우스 커서를 갖다대면 평상시 화살표 모양의 커서가 아닌 아래 사진처럼 손가락모양으로 커서가 바뀌게 된다. 이처럼 cursor옵션을 통해서 마우

flex는 효과적으로 요소 간의 공간을 배치하고 정렬을 관리하기 위한 레이아웃으로복잡한 레이아웃을 쉽게 구현할 수 있게 해준다.display : flex 또는 inline-flex를 이용하여 설정해줄 수 있다.flex는 블록레벨, line-flex는 inline레벨이다

flex를 조금 더 만져보면서 이해해야 도움이 될 것 같아서이렇게 저렇게 만져보고자 했고 그 속에서 다양한 단위들도 사용해 보았다.좋은 방법이 아닐 순 있으나, 기능들을 사용해보는 것에 크게 의의를 뒀다.상 중 하로 구역을 나눠서 사용해 보고 싶었으며, 구역을 나눠보고

HTML태그 또는 요소의 위치를 지정하기 위해서 사용되는 position에 대해서 알아보자position속성은 요소의 정확한 위치 지정을 위해서 top, right, bottom, left 속성과 함께 사용한다.1\. static(기본값)포지션을 설정하지 않았을 때 기

Semantic이라는 단어가 의미의, 의미론적인이라는 뜻이 담겨 있다.여기서 생각했을 때 Semantic Tag는 의미가 담긴 태그라는 것을 유추해볼 수 있다.1\. 시맨틱 태그(Semantic Tag)시맨틱 태그(Semantic Tag)는 포함된 요소의 특정 의미를