누워서 떡먹기 코딩

border-radius 속성 요소의 속성중 모서리를 둥굴게 하는 속성이다. border-top-left-radius : 왼쪽 위 모서리를 둥굴게 border-top-right-radius : 오른쪽 위 모서리를 둥굴게 border-bottom-left-radius : 왼쪽 아래 모서리를 둥굴게 border-bottom-right-radius : 오른쪽 아래 모서리를 둥굴게 border-radius 예시 See the Pen border-radius by 정혜선 (@Diligent-milk) on CodePen.

box-sizing속성 요소의 크기를 화면에 표시하는 속성 content-box: 가로, 세로 크기에 안쪽여백이 더해져서 표현 border-box: 가로, 세로 크기에 영향을 주지 않도록 표현 box-sizing 예시 See the Pen box-sizing by 정혜선 (@Diligent-milk) on CodePen.

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(프로토콜..

앞에서는 싱글 링크드 리스트를 배웠으니 이제 이중 연결 리스트 (더블 링크드 리스트)를 알아보자. 더블 링크드 리스트는 양방향으로 data, next, prev 3가지 구조로 이루어져 있다. 여기서 prev는 이전 노드를 가르킨다. 다음은 중간 노드 삭제 순서이다.

싱글 링크드 리스트(단순 연결 리스트) 연산들의 시간 복잡도를 알아 보자. 접근 시간 복잡도 인덱스 x에 있는 노드에 접근하려면 head에서 다음 노드로 x번 가면 된다 마지막 노드에 접근하려면 head에서 다음 노드로 n-1번 가야된다. 최악의 경우 시간 복잡도 : O(n) 탐색 시간 복잡도 배열을 탐색할 때와 같은 방법으로 구한다. 가장 앞 노드부터 다음 노드를 하나씩 보면서 원하는 데이터를 갖는 데이터를 찾는다. 이를 선형 탐색이라고 한다. 링크드 리스트안에 찾는 데이터가 없거나 또는 찾으려는 데이터가 마지막 노드에 있는 최악의 경우 n개의 노드를 다 봐야한다. 최악의 경우 시간 복잡도 : O(n) 삽입 / 삭제 시간 복잡도 삽입, 삭제는 그냥 삽입, 삭제할 인덱스의 주변 노드들에 연결된 레퍼런스만..