whatisthis?

20. ETC. 1) 태그 = 약자. abbriation ** 필수 속성 = title 속성 예제- What is ADHD title = " " 안에 입력한 값이 툴팁 형식으로 나타난다. ** title 속성 title 속성은 element에 적용할 수 있으며 해당 요소에 마우스를 올릴 경우 툴팁창이 나타남. 2) 태그 - 연락망 주소 / URL / E-mail주소 / 전화번호 / SNS 등. thisisyjin https://mywebproject.tistory.com/ 3) & 태그 pre = preformatted element. -> 미리 포맷이 정해진 것. thisis yjin 만약 우리가 위와 같이 코드를 입력하면, 우리는 줄바꿈을 해서 입력했음에도 웹브라우저상에서는 한줄로 나타나게 된다. 하..

https://beautifulcss.com/archives/2812 Beautiful CSS » 포지셔닝 : Flexbox 이 게시물은 2020년 10월 25일 수정판입니다. Image from Introducing Flexbox Fridays 이야기에 앞서 Flexbox Layout은, 새롭게 CSS3 명세에 반영된 레이아웃 모듈로서, 요소들이 수용된 공간을 어떻게 효과적으로 beautifulcss.com -Flexbox로 레이아웃을 잡으면 모바일을 포함한 하이브리드 앱으로 만들때도 별도의 추가작업이 필요하지 않음. Flexbox는, 유연한 요소(내용물) 그리고 그 요소를 담을 그릇으로 이루어짐. 1. 그릇에 해당하는 부모 요소(=컨테이너) 에 display: flex 를 입력해주어 flexbox임을..

17. Table 기본 구조 테이블 헤더 테이블 데이터 테이블 태그의 기본 구조는 table>tr>th+td 이다. 셀이 헤더에 관련된 것 = th 셀이 데이터에 관련된 것 = td table row = tr (row는 가로줄) 즉, tr 묶음당 가로줄에 들어갈 데이터를 좌->우 순으로 입력해 주면 됨. ID 이름 나이 thisis 김ㅇㅇ 22 yjin 최ㅇㅇ 31 injung 박ㅇㅇ 18 th 개수만큼 반드시 td를 넣어줘야한다. 즉, 빈칸으로 두더라도, 는 반드시 입력해야함. th만 있는 tr부분은, 로 다시한번 감싸주고, 아래 부분은 로 감싸주면 의미가 명확해진다. ** tfoot 은 테이블 푸터(footer)으로, 주로 '총합'. '평균'등의 값을 나타낼때 따로 구분해줌. 18. Tabel 심화 ..

area base br col command embed hr img input keygen link meta param source 종료태그를 쓰지 않는 요소 대신, XML처럼 />로 마무리할 수 있다. 형태로 작성하여 태그의 종료를 알리는 편이 좋다. 왜? 위 요소들은 닫는태그가 없을까? - 태그 내부에 넣을 값이 없기 때문.

HTML) HTML 기초 上 (Headings / Paragraph / Emphasis / Anchor / Image / List / Quoatation ) 1. 태그 해부학 마크업을 하고자하는 내용과 와 같이 열림태그, 닫힘태그로 이루어져있다. 태그 속성 속성값 thisisyjin lang이라는 속성은 언어를 나타내며, lang 속성에 대한 value가 궁금하다면 구글 mywebproject.tistory.com Headings / Paragraph / Emphasis / Anchor / Image / List 8. 인용 Quotation 태그 문단, 내용 전체가 인용문인 경우. 보다는 태그를 더 자주 사용. Think like a man of action and act like man of thoug..

1. 태그 해부학 마크업을 하고자하는 내용과 와 같이 열림태그, 닫힘태그로 이루어져있다. 태그 속성 속성값 thisisyjin lang이라는 속성은 언어를 나타내며, lang 속성에 대한 value가 궁금하다면 구글링 > html lang values https://www.w3schools.com/tags/ref_language_codes.asp HTML ISO Language Code Reference HTML Language Code Reference ISO Language Codes You should always include the lang attribute inside the tag, to declare the language of the Web page. This is meant to ass..

김버그의 HTML&CSS는 재밌다 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎 edu.goorm.io 21-10-04 시작. 크롬 개발자 도구 윈도우 = F12 맥 = 옵션 + 커맨드 + i 코드 에디터를 직접 설치하자. vscode 추천. ( Visual Studio code) https://ide.goorm.io/ 구름IDE - 설치가 필요없는 통합개발환경 서비스 구름IDE는 언제 어디서나 사용 가능한 클라우드 통합개발환경(Integrated Development Environment IDE)을 제공합니다. 웹브라우저만 있으면 코딩, 디버그, 컴파일, 배포 등 개발에 관련된 모든 작업을 클라 ide..

수정중 flex - CSS: Cascading Style Sheets | MDN flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. developer.mozilla.org flex flex 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. 대부분의 경우, flex의 값에는 auto, initial, none이나 단위 없는 양의 수를 사용해야 합니다. flex: 1; flex: 1 30px; flex: 1 1 100px; auto, initial, none initial 아이템 크기가 각각의 width와 height 속성에 따라 정해집니..

float - CSS: Cascading Style Sheets | MDN CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. developer.mozilla.org float CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. float: none; (초기값) float: left; float: right; 부동(floating) 요소 = fl..

화면에 크기에 따라 웹페이지 요소들이 최적화된 크기로 바뀌게 하는 것. >> 핵심 : 미디어 쿼리 ** 화면이 600px보다 커질때 글자가 없어지게끔 하려면 다음과 같이 mediaquery를 사용하면 된다. 스크린 너비 > 600px 이라는 것은, 최소폭이 600px이라는 것 이므로, min-width=600px이 된다. 조건 screen width > 600px = @media(min-width:600px) 적용할 선택자, 속성 div{ display:none; } = 600px이 넘어가면 display:none으로 인해 사라지는 것을 알 수 있다! +) 반대로, max-width를 사용하면, 폭이 600보다 작아지면 사라지게 된다.