FrontEnd/HTML, CSS (9) 썸네일형 리스트형 간단한 CSS속성과 대응되는 값 정리 1. flex-direction: 자식 아이템들의 배치 방식과 관련된 속성이다. 값으로 row가 오면 왼쪽부터 오른쪽으로 차례로 배치되고, 값이 column이면 위에서 부터 아래로 배치된다.2. justify-content: 콘텐츠 항목 사이와 주위에 가로 공간을 분배하는 방법을 정의한다. 가로 축을 기준으로 좌우에 대한 정렬과 연관됨.flex-derection이 row(가로 배치)일때는 왼쪽에서부터, column(세로배치)일때는 위에서 부터정렬된다.다음은 justify-content속성의 값으로 올 수 있는 것들이다.space-between아이템들의 "사이(between)"에 균일한 간격을 만들어준다.ex) space-around아이템들의 "둘레(around)"에 균일한 간격을 만들어준다.justify.. [CSS] 단위 관련 관련영상: https://www.youtube.com/watch?v=SmzghM3l228 % 란, 전체의 몇 퍼센트인지에 대한 값입니다. 부모 기준으로 자식의 넓이를 %라고 한다.예를 들어, 부모 태그의 넓이가 1200px일때 자식에게 50%를 적용하면 자식 태그의 넓이는 600px이 된다. em과 rem이란? em 단위는 상위 요소 크기의 몇 배인지를 정하는 단위(em은 element의 약자)이다. 예를 들어, 상위 태그의 폰트 크기가 16px 인경우, 하위 태그에 폰트 크기에 1em으로 적용한다면 1em = 16px 이다.1.5em = 24px(16*1.5) 이다. 추가로, rem 이란 em 앞에 R이 붙는다. 이것은 Root의 약자로, 최상위라는 뜻이다. 그래서 그냥 가장 상위인 html 태그에 .. Script태그에 대하여 참고: https://shape-coding.tistory.com/entry/JavaScript-Script-%ED%83%9C%EA%B7%B8%EC%9D%98-%EC%9C%84%EC%B9%98%EB%8A%94-%EC%96%B4%EB%94%94%EA%B0%80-%EC%A2%8B%EC%9D%84%EA%B9%8C (script태그는 어디에 위치해야 좋은가를 말하는글) HTML 문서를 읽고 파싱하는 과정에서 defer도 async와 비슷합니다. 태그를 만나도 HTML 파싱이 중단되지 않고 javaScript 파일과 함께 파싱됩니다. 하지만 다른 점은 javaScript 코드를 실행하는 시점은 HTML 파싱이 모두 완료된 이후입니다. 이처럼 , , 태그를 상황에 맞게 사용하여 스크립트 파일의 파싱 순서를 제어할 .. input 태그 속성정리 input태그는 그 안에 값을 입력할 수 있는 방법이 여러가지 존재한다. 그것을 정리해보고자 한다. 위와 같이 type="text"로 하여 입력을 받을 수도 있고 onChange와 value속성을 이용해서 입력을 받을 수도 있다. 또 아래와 같이 필요하다면 type, onChange, value속성을 모두 사용하여서도 값을 입력받을 수도 있다. html 태그의 속성의 중요성에 대하여(html의 input태그의 type="email"에 대하여) 위와 같이 input태그의 type="email" 이라고 설정하면 html언어 자체적으로 input안에 들어가는 문자열을 검열하여 '@'이 들어가있지 않으면 자체적으로 에러를 발생시킨다. 즉, 내가 '@' 기호가 있는지 없는지를 검사하라고 코딩해 준것도 아니고 없다면 아래와 같은 오류를 발생시키라고 명령한 적도 없는, html자체의 고유한 기능이다. 이와 같이 html태그의 속성은 매우 중요한 역할을 한다. 지금은 일일히 그것을 다 알수 없어도 각각의 속성들은 중요한 역할을 한다. 예를들어 서버에 데이터를 전송할때나 label태그와의 상호작용을 할때 input태그의 속성들은 각각 저마다의 역할이 있다. html form태그 속성과 그 속성에 근거하여 연결된 input, button태그와의 연관성에 대하여 html의 input태그의 type을 submit으로 하면 버튼모형으로 바뀌고 submit이 아니면 텍스트를 입력할 수 있는 input창으로 변함. input태그를 감싸고 있는 form태그의 onSubmit 이벤트 핸들러에 js로 어떠한 함수를 등록시켜 놓으면 input태그의 type속성의 값을 submit으로 주었다는 전제하에 그 함수가 실행된다. 즉 form태그의 onsubmit이벤트 핸들러의 실행은 form태그 그 자체와는 관계없이 그 안에 있는 input태그나 button태그의 속성인 type을 submit으로 지정한 것과 연관된 것이다(그 버튼을 누르면 onSubmit의 값으로 할당된 함수가 실행되는 것이다. 참고:https://penguingoon.tistory.com/188 HTML, CSS 잡다하지만 꼭 알아야 할 것 여기다 정리 웹에서 개발자 도구 켜놓고 화면에서 ctrl+shift+c 하면 해당 화면에 대응되는 코드 블럭 처리되어 알려줌 title앞에 나오는 아이콘 그림을 파비콘(favicon)이라고함 URL과 URLSearchParams 출처:https://www.zerocho.com/category/HTML&DOM/post/5b3ae84fb3dabd001b53b9ab 이번 시간에는 HTML5의 URL과 URLSearchParams 객체에 대해 알아보겠습니다. IE에서는 안 되지만, 모던 브라우저에서는 사용할 수 있는 기능입니다. 웹은 주소를 기반으로 동작하기 때문에 주소를 자유자재로 다룰 수 있으면 좋습니다. 특히, 쿼리스트링(sear부분)을 파싱하는 것과 같은 귀찮은 작업을 간단히 처리할 수 있어 편리합니다. 노드의 url 모듈과도 비슷합니다. 사용 예시를 봅시다. URL 생성자에 주소를 넣어 인스턴스화하면 됩니다. const url = new URL('https://www.zerocho.com:8080/category/HTML');.. 이전 1 2 다음
