Web/HTML && CSS
[CSS] Selector
[CSS] Selector
2022.12.081. 띄어쓰기 1 2 3 이 적용된다. 띄어쓰기 a b 는 a 내부에 있는 b 모두를 지정함. 2. + 3 이 지정된다. a + b 는 a 태그 아래 b 한개만 지정함. 3. ~ 3 4 가 지정된다. a ~ b 는 a 태그 아래의 b 모두를 지정함. 3. anchor a : b 는 a 태그를 b 할 때 { ... } 를 작동시킨다. 선택자와 결합해서 사용하는 경우가 많음. a:first-child 는 첫 번째 요소를 가리킴. 4. pseudo-element 왼쪽과 같이 첫 줄만 지정하거나 첫 글자만 지정하는 등 특정 부분을 지정할 때 사용한다. before와 after로 요소를 배치하는것도 가능함. 태그 없이 :: 만 사용해서 요소를 지정하기도 한다. 5. attribute selector 웹 크롤링 시..
[HTML] Media
[HTML] Media
2022.12.02웹 페이지 내부에서 이미지, 음악, 비디오 등 다양한 미디어를 표현할 수 있다. 1. Video 여러 format이 있지만 HTML 에서는 MP4, WebM, Ogg 형식만 지원한다. controls 속성으로 재생 / 정지 등 실행을 제어할 수 있는 장치를 해당 비디오에 추가한다. 브라우저가 첫 번째 source를 재생하지 못하면 다음 source를 재생하는 방식으로 동작한다. 태그 기반으로 동작하기 때문에 자바스크립트의 DOM을 사용해 비디오를 다룰 수 있다. video 태그에 여러 속성을 추가 할 수 있다. autoplay : 브라우저가 로딩됐을 떄 자동으로 재생하도록 설정한다. mute : 음소거 상태로 재생한다. track : 속성은 아니다. source 밑에 추가해 비디오의 자막을 설정한다. 2..
[HTML] Graphics
[HTML] Graphics
2022.12.01HTML의 canvas / svg 태그를 사용하면 웹 페이지 내부에 그림을 그릴 수 있다. canvas 태그를 사용해 지정한 위치에 선을 긋는 간단한 예시이다. canvas 태그를 사용할 때는 자바스크립트를 사용해서 그림을 그린다. 간단하게 선을 긋는 예시 뿐만 아니라 이미지, 원, 색상 등 다양한 그림을 표현할 수 있으니 필요할 때 찾아서 사용하자. svg 태그를 사용해 사각형을 그리는 예시이다. 자바스크립트 대신 HTML 태그를 사용해서 그림을 표현한다. 태그 기반이기 때문에 그림의 일부를 수정할 때 자바스크립트의 DOM으로 접근한다. svg는 태그를 사용해 그림을 표현하는구나 ~ 정도로만 머리에 넣고 이 정보를 인덱스로 필요할 때 찾아서 사용하자. canvas는 픽셀 단위로 그림을 표현해 확대 시 ..
[HTML] API
[HTML] API
2022.11.15HTML이 제공하는 여러 API를 사용해 다양한 기능을 쉽게 구현하자. 사용하기 전 웹 브라우저가 API를 제공하는지 확인해야 한다. 1. Drag and Drop 사용자 인터페이스 중 Drag and Drop 이 있다. 구글 캘린더에서 일정을 등록할 때 사용하기도 하는데, API 를 사용하면 Drag and Drop 을 쉽게 구현할 수 있다. (https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop) 드래그 시작 시 dataTransfer 객체에 Text 형식의 id를 보낸다. 기본적으로 HTML에서는 다른 요소가 드랍되는걸 지원하지 않기 때문에 드랍 대상인 div 박스에서는 preventDefault() 메서드를 실행시킨다. 이미..
[HTML] Layout (1)
[HTML] Layout (1)
2022.10.25기존에는 HTML에서 영역을 나눌 때 div태그에 id값을 지정해 주는 방식을 사용했다. 하지만 여러 개발자들이 각각 다른 id를 사용하게 되고, HTML 코드의 일관성이 떨어져 새로운 방법을 고안했다. 각각의 레이아웃에 대응되는 새로운 태그를 만들어 화면을 구성하는 방법을 사용한다. CSS FlexBox : 컨테이너 내부에 요소를 배치한다. 가로 또는 세로를 기준으로 요소를 배치한다, CSS Grid : 컨테이너 애부에 요소를 배치한다. 2차원 좌표평면을 기준으로 요소를 배치한다. 두 가지 모두 HTML 요소를 배치할 때 유용하게 사용된다. Semantic Element 태그만 봐도 직관적으로 해당 태그가 무슨 역할을 하는지 유추할 수 있는 Element를 의미한다. : 내부에 제목과 내용을 포함한다...
[HTML] Form (1)
[HTML] Form (1)
2022.10.25output oninput : input을 받을 때 마다 x를 갱신한다. range : 막대기로 값 입력 number : validation으로 숫자만 입력하도록 설정함. 이 외에도 여러 가지 input type 속성이 있으니 이런게 있구나~ 정도만 생각해두고 필요할 때 찾아서 사용하자. 속성 값이 직관적이라서 어떤 역할을 하는지 이해하기 쉽다. 속성 값을 사용해 편하게 validation을 수행할 수 있다. 당연히 자바스크립트와 백엔드 언어로도 validation을 수행해야 하고, html은 추가로 사용한다고 생각하자. input 태그에서 min max 속성을 설정해서 입력할 수 있는 최소치와 최대치를 설정할 수 있다. readonly : 커서를 놓을 수는 있지만 값을 변경 할 수는 없음. 대신 sub..
[CSS] CSS 정리 (5)
[CSS] CSS 정리 (5)
2022.09.21기본 문법은 위와 같이 사용한다. Selector로는 태그 이름 혹은 CSS 선택자를 사용한다. 모든 요소의 이름은 숫자로 시작하면 안 된다. id : #으로 선택. 문서 안에 하나만 사용한다. class : .으로 선택. 문서 안에 여러 개를 사용해도 된다. 그룹화에 사용됨. 띄어쓰기하면 클래스 2개 지정. p.large는 p요소의 large를 의미 * : 모든 요소를 선택함 opacity/transparency : 투명도 background-repeat : 배경 이미지를 반복해서 배경 채움 background-attachment : fixed 설정 시 스크롤해도 이미지 고정 background-position : 배경 이미지 위치 지정 border-radius : 둥글게 margin : auto 설정..
[HTML] HTML 정리 (3)
[HTML] HTML 정리 (3)
2022.09.14HTML의 모든 표현은 대소문자를 구분하지 않지만 소문자로 표현하는걸 권장함. : 사용자에게 보여지지 않는 부분. 브라우저가 HTML문서를 처리할 때 필요한 정보들이 포함된다. (메타) : 사용자에게 보여주는 부분. : 문서가 뭘로 쓰였는지 알려준다. 은 html로 쓰였다는걸 의미. : 제목. 숫자 작을수록 중요도 높음 1 ~ 6 : 한 단락. 화면은 알아서 조정되고 공백과 개행문자도 적절히 처리됨. block : block : in-line : 공백과 개행문자를 그대로 해석함. 태그와 함께 사용해서 소스코드를 명시할 수 있음. : 행 바꾸기 (줄바꿈) p 태그랑 함께 사용해서 단락을 구성할 수 있다. : 줄 긋기. 주제 전환 시 사용. , : 굵게 , : 이탤릭체 : 주석 : 특정 영역을 만들고 해당 ..
[CSS] CSS 정리 (4)
[CSS] CSS 정리 (4)
2022.02.06지금까지 CSS를 사용해 웹 페이지를 아름답게 꾸미고 시각적으로 보기 좋은 웹 페이지를 만드는 방법에 대해 배웠다. 이제 웹 페이지간의 상호작용에 집중해 애니메이션 동작을 구현해보자. transform 물체의 크기 형태 위치를 바꾸는 것을 변형이라고 한다. CSS 변형을 이용해 좀 더 동적 웹 페이지를 만들어보자. 변형을 적용하기 위해 transform 속성과 속성에 해당하는 다양한 함수를 사용한다. 1. translate() 함수 상자에 커서를 가져가면 translate함수에 맞춰서 상자를 이동시킨다, x y 좌표를 사용해 2차원 간의 이동을 설정할 수 있고, z좌표까지 사용하면 이동을 3차원으로 확장할 수 있다. 2. scale() 함수 요소를 지정한 크기만큼 확대하거나 축소할 수 있다. 2차원과 3..
[CSS] CSS 정리 (3)
[CSS] CSS 정리 (3)
2022.01.21특정 부분이나 글자 등 여러 요소들에 대해 배경을 넣어서 아름다운 웹 페이지를 만들 수 있다. 웹의 바탕을 꾸며 주는 배경 스타일에 대해 알아보자. background 1. background-color 배경색을 지정할 때 사용한다. 색의 지정은 텍스트의 색상을 설정하는 방법과 동일하다. (16진수, RGB, HSL) 또한 background-color 속성은 스타일 상속에서 배재된다. 2. background-clip 배경색의 적용 범위를 조절하는 역할을 한다. border-box : 테두리까지 적용한다. padding-box : 패딩 범위까지 적용한다. content-box : 콘텐츠 부분에만 적용한다. 박스 모델에서 어떤 요소까지 배경색을 적용할 지를 결정한다. 3. background-image ..
[CSS] CSS 정리 (2)
[CSS] CSS 정리 (2)
2022.01.20웹 문서에서 내용을 배치할 때 각각의 요소들을 박스 형태로 구성한다. margin padding border 등 여러 가지 박스 요소들을 사용해 문서를 적절하게 배치하고 꾸밀 수 있다. 이제 CSS의 박스 모델에 대해 알아보자. 박스 모델 1. 블록 레벨 요소 블록 레벨 요소는 태그를 사용했을 때 혼자 한 줄을 차지하는 것을 말한다. 위에서는 , , 태그가 블록 레벨 요소이다. 2. 인라인 레벨 요소 인라인 레벨 요소는 한 줄을 차지하지 않고, 콘텐츠만큼의 영역을 차지한다. 위에서는 태그가 인라인 레벨 요소이다. 블록 레벨 요소와 인라인 레벨 요소를 비교 확실하게 이해하자. 이제 박스 모델을 사용해서 화면을 구성할 때 필요한 개념에 대해 알아보자. 패딩 / 테두리 / 마진은 상하좌우로 나뉘어 있어 네 방..
[CSS] CSS 정리 (1)
[CSS] CSS 정리 (1)
2022.01.19HTML (Hyper Text Markup Language)는 웹 사이트의 내용을 담당하고, CSS (Cascading Style Sheets)는 웹 사이트의 디자인을 담당한다. CSS는 웹 문서의 스타일이다. (Cascading : 위에서 아래의. 계단식의 정도로 해석하면 된다.) 웹 페이지를 항상 컴퓨터에서만 열람할 수는 없다. 모바일, 태블릿 등 여러 가지 환경에서 웹 페이지를 열어볼 수 있는데 여기서 HTML만을 사용해서 웹 페이지를 구성하게 되면 다양한 환경에 대한 화면을 따로따로 만들어야 하지만, CSS를 도입하면 하나의 웹 페이지의 뼈대에 CSS만 다르게 적용하는 것으로 효율적으로 다양한 환경의 화면을 구상할 수 있다. (이를 반응형 웹 디자인 이라고 한다) 위를 통해 알 수 있듯 CSS는 ..