$$config title: 코드펜 keywords: - HTML - CSS - JS $$ # 2022-05-14 # 배울것 ___ | 대주제 | 소주제 | | -- | -- | | @rows=3: 코드펜 | HTML | | CSS | | JS | # 페이지 주소 - https://slog.gg/p/5661 # 코드펜의 3가지 창 ___ - HTML(Hypertext Markup Language) : 결과창에 나올 내용을 입력한다. 결과창에서 나타난다. - CSS(Cascading Style Sheets): HTML의 내용을 꾸민다. - JS(Java Script) : HTML의 복잡한 내용을 꾸민다. 하지만 어려워서 CSS를 더 많이 사용한다. # HTML ___ - 프로그래밍 언어가 아니고 마크업 언어(화면에 표시되는 형식을 나타내거나 논리적인 구조를 정의한 언어)다. - 결과창에 나올 내용을 입력한다. - 여러가지 **HTML 태그**가 있으며 무속성태그(div, nav) 또는 속성태그(html, h1)들이 있다. ### HTML 태그 ___ - HTML 태그(tag)는 HTML 요소(element)라고도 부르며, HTML 문서를 구성하는 기본 단위이다. - 태그는 div같은 태그 이름을 쓰고 Tab를 누르거나 앞에< 뒤에>를 붙여주고 내용을 입력한다, 그리고 <>사이에 /를 넣는다(밑, CSS 예시참고). ##### 태그 예시 ___ ```html

hello world!

``` # CSS ___ - CSS는 HTML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는지 지정한다. - 레이아웃과 스타일을 정의할 때의 자유도가 높다. - HTML같은 마크업 언어가 하드웨어를 담당한다면, CSS는 소프트웨어를 담당한다. - CSS에서 특정 태그를 입력하고 color나 width같은 언어들을 입력하면 그 태그 내에서만 편집이 적용이 된다. - CSS는 이미 기본값이 설정되어있으며 그걸 바꾸는 것이다. ### CSS 예시 ___ $$codepen https://codepen.io/withshk/embed/MWQbPmd $$ # JS # 2022-05-15 ___ # 링크 ___ $$codepen https://codepen.io/withshk/embed/mdXOvdW $$ - 이런식으로 링크를 달수 있다. # 자식태그 > ___ - CSS에서 >는 자식을 의미하며, 그걸 활용해 예시처럼 tab을 이용해 만들수 있다. ```html table>tr*3>td*3

``` - 이를 이용해 표를 만들수 있다. $$codepen https://codepen.io/withshk/embed/RwQKWYv $$ - 이와 비슷한 방식을 사용해 링크를 달때 간편하게 사용할수 있다 ```html a[href="https://to2.kr/bTn"][target="_blank"]{bmx}+br*2+a[href="http://www.naver.com/"][target="_blank"]{네이버} ``` # 정렬 ___ - inline-block안에서는 CSS에서 text-align을 사용해 left, middle, right로 정렬할수 있다. ## 예시 ___ $$codepen