HTML &  CSS

HTML - 구조(Structure)CSS - 스타일(Presentation)JS - 상호작용(Interaction)을 표현함.HTML은 HyperText Markup Language의 약자로 웹 페이지를 구성하는 마크업 언어이다. HTML은 프로그래밍 언어가 아니고,

웹 페이지에 출력되는 모든것은 요소를 사용해서 만들게된다.글자 , 이미지 , 동영상 등 다 하나의 요소이다.이러한 요소들은 태그를 기반으로 만들게 된다.태그자체를 요소라고도 불러도 상관은 없다.태그는 크게 두가지로 나뉜다.태그의 종류\-내부에 무언가를 가질 수 있는 태

앵커태그를 줄여서 <a></a>라는 a태그는 내부에 내용물을 가질수있는 태그이다.HTML - Hypertext Markup Language 즉 줄임말이 html이고, 앵커태그의 역할은 문서와 문서를 이동하는 Hypertext의 역할을 한다.그러면 <

<div></div> , <span></span> , <br/> , <hr/>에 대해 간단하게 알아본다.<div></div> , <br/>태그는 줄바꿈을 할수있고 , <span></span>태그는 이어서 붙일수

순서가 있는 목록 : <ol></ol> : ordered list1.바나나2.딸기3.수박4.키위순서가 없는 목록 : <ul></ul> : unordered list\-바나나\-딸기\-수박\-키위위의 글자(바나나,딸기 ~) 하나하나들은 list가 가

img태그는 이와같이 <img> , <img /> 두가지로 다 써도된다.img태그안에 속성으로 alt='속성값'은 웹 페이지가 어떠한 이미지를 가지고있는지 출력하거나 이미지가 없거나 경로가 잘못되어 안나올때,화면에 출력되는값을 쓸수있다.img태그 안에 크기

우선 말그대로 오디오태그는 <audio></audio> , 비디오태그는 <video></video>로 쓸수있다. 닫는태그가있다는걸 주의!<img>태그처럼 안에 속성을 넣을수있다.오디오와 비디오 둘다 넣었는데 저렇게 보인다 .저기서 속성으로 c

먼저 입력양식을 만들때는 <form></form>태그를 먼저 쓰고 내부에 <input></input>태그를 씁니다.만약 input태그를 사용하여 게시글을 만들어서 내용을 쓰고 제출하는 코드를 쓰고싶다면,<input type='submit'>을

말그대로 글자를 쓸 공간이다.쓰는방법과 주의할점에 대해 알아보자.안의 cols=''는 명확하게 표현되진 않지만 공간의 너비라고 생각하면 되고, rows=''는 줄을 의미한다. 위에 rows='10'은 글자를 10줄 까지 보여준다는 의미이고, 10줄을 초과하면 스크롤이

-input 입력양식- -checkbox- ``로 쓸수있다. 말그대로 체크박스를 출력한다. ``태그를 써서 사용해보면, ![](https://images.velog.io/images/hyo123/post/42d1b84d-29ff-4986-bde6-17ce511e58

간단하게 설명하자면html은 구조(프레임)css 는 스타일(꾸미는거)javascript는 유저와의 상호작용HTML은 tag 들의 집합이다.Tag : < > 로 묶인 HTML의 기본 구성 요소태그 내부에 내용이 없다면 와 같이 표현 가능HTML은 TREE 구조 이

시맨틱요소(semantic element) ->시맨틱이란 '의미가 있는, 의미론적인' 이라고 해석할 수 있다.즉, 의미를 가진 요소를 사용하는 방식을 추구하기 시작했다.<h1>요소는 최상위 제목을 표현할 때 사용하는 요소이고,큰 폰트 사이즈를 적용할 뿐아니라, 위

직관적이고 쉬운 UI( user interface ) 제작은 프론트엔드 개발자의 기본 소양이다.UI : user interface의 약자로 interface는 컴퓨터와 교류하기 위한 연결고리이다. 즉 사용자와 컴퓨터의 연결고리이다.UX : user experience

모든 콘텐츠는 고유한 영역이 있다.모든 콘텐츠는 각자의 영역을 가지며 일반적으로 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 된다.박스는 항상 직사각형이고, 너비(width)와 높이(height)를 가진다.박스의 종류는 줄 바꿈이 되는 박스와 줄바꿈이 없이 옆으로 붙

CSS 박스 모델은 아래 그림만 생각하면 된다.그림에서 border(테두리)를 기준으로 padding(안쪽 여백)과 margin(바깥 여백)이 있다.테두리는 시각적 용도 외에도, 개발 과정에서 매우 의미 있게 사용한다.각 영역이 차지하는 크기를 파악하기 위해 레이아웃을

\->\* {}\->h1 {}, div {}, p {} ...\->\->.class {}\`자식 셀렉터는 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택한다. <header> 요소 바로 아래에 있는 두 개의 <p> 요소는 선택되지만, header요소의