누워서 떡먹기 코딩

display속성 : 화면에 보여지는 형태를 지정 요소의 inline, block, inline-block특성을 바꿔준다. inline : 내용만큼의 영역을 가지는 속성, 여백 및 크기조절이 불가능한 속성 block : 웹 페이지의 전체 너비를 영역으로 가지는 속성 inline-block: inline처럼 내용만큼의 영역을 가지면서, block처럼 여백 및 크기조절이 가능한 속성 none : 요소를 화면에서 제거하는 속성 display 예시 See the Pen MWpOzRY by 정혜선 (@Diligent-milk) on CodePen. margin과 padding 내용겉에 있는 여백이다. 아래 그림에서 272 x 92가 내용 영역이다. 그림에서 보여지듯이 padding이 더 안쪽 여백이고 margin..

https://codepen.io/trending CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 위에는 CodePen 사이트이다. 위 사이트에 들어가서 회원가입을 한 후 pen을 클릭하면 HTML작성 페이지로 넘어간다. 왼쪽 위를 눌러서 제목을 설정해줘도 되고 안 해줘도 된다. HTML, CSS, JS를 작성한 후 Save를 누르면 저장이 된다. 그리고 Embed을 누르면 된다. Embed를 누르면 새창이 하나 뜬다. 아래..

CSS(Cascading Style Sheets)는 HTML문서의 스타일을 꾸밀때 사용하는 스타일 시트 언어이다. HTML에서 CSS가 분리된 이유는 정보(HTML)와 디자인(CSS)의 분리, 유지 및 보수의 편의성, 효율적인 재사용성 때문이다. 기본구조 h1(선택자 selector){ color(스타일 속성 property) : red(속성값 value); } 태그 정리 폰트 속성 font : 요소가 화면에 보이는 방식 지정 font - famliy : 글꼴 font - size : 글자 크기 font - weight : 글자 두께 font - style : 글자 스타일 선택자 조합해서 사용하기 1. OR 연산 쉼표 (,)를 활용하면 OR 연산이 됩니다. 두 CSS 선택자 중 하나라도 해당되면 선택합니..

포함태그 iframe : 웹 페이지에 다른 웹 페이지를 넣는 태그 속성 설명 src : iframe에 삽입될 주소 name : yarget이 필요한 이름 지정( a 태그와 연결) width : 너비 지정 heigh : 높이 지정 frameborder : 테두리 유무 (테두리 삭제 =0, 테두리 생성 = 1) scrolling : 스크롤 유무(yes, no, auto) align : iframe정렬(left, right) 예제1 See the Pen iframe태크 by 정혜선 (@Diligent-milk) on CodePen. 강조태그 mark : 단순 참조표시할 때 사용하는 태그 텍스트 추가설명 태그 details : 숨길 내용을 작성하는 태그 태그 summary : 숨겨진 내용에 대한 제목을 나타내는..

제목 태그 : h1~h6 h1~h6: HTML문서 본문 내 제목을 표현한다. 1~6까지 순서대로 크기가 줄어든다. 문단 태그 : p, br, hr p: 본문 글자 태그, 본문의 내용을 단락으로 표현할 때 사용하는 태그. 본문 br : 줄바꿈(개행) 태그. hr : 단락 간의 구분을 위해 사용하는 태그, 수평 줄 태그 글자 태그 : b, strong, i, em b : 굵은 글자, 다른 텍스트와 구별할 때 사용하는 태그 strong : 중요한 문구를 강조하는 태그 i : 텍스트를 기울여 다른 글자와 구분하기 위한 태그 em : 중요한 문구를 기울여서 강조하는 태그 예제 1 See the Pen 제목, 문단, 글자 태그 by 정혜선 (@Diligent-milk) on CodePen. 이미지 태그 : img ..

HTML을 하기전에 간단히 용어부터 알아보자. 클라이언트(Client)/ 서버(server) 클라이언트(Client) : 정보/서비스를 요청하는 PC (네트워크로 연결된 서버로 부터 정보를 제공받는 컴퓨터) 서버(server) : 정보/서비스를 제공하는 PC (클라이언트에게 네트워크를 통해 서비스를 제공하는 컴퓨터) 프로토콜(Protocol) TCP/IP : 서로 다른 시스템을 가진 컴퓨터들을 서로 연결하고 데이터를 전송하는 통신규약 HTTP : 서버와 클라이언트가 인터넷 사이에 웹 문서(HTML)를 전송하기 위해 사용하는 통신 규약 하이퍼텍스트를 기반으로 데이터 전송 -> 링크(LINK)기반의 웹 문서 접속 요청/응답(request/ reponse)방식으로 동작 URL : 인터넷 주소 http(프로토콜..