codingpark-blog의 등록된 링크

 codingpark-blog로 등록된 네이버 블로그 포스트 수는 10건입니다.

[HTML 배우기] <ul>, <ol>, <li>태그로 목록 만들기 [내부링크]

오늘은 HTML에서 목록을 만드는 방법에 대해 설명하겠습니다.목록을 만들기 위해서는 <ul>, <ol>, <li> 태그들이 사용됩니다. <ul> 태그 (unordered list)<ul> 태그는 정렬되지 않은 목록을 만들 때 사용합니다. 위에 예시에 보이듯이 목록을 동그라미로 나열합니다.목록 땡땡이 다른 모양으로 꾸미기css 스타일에 list-style-type 속성을 이용하면 검은 동그라미 대신 다른 모양으로 목록을 표시 할 수 있습니다. 기본적인 모양으로는 circle (동그라미)와 square (네모)가 있습니다.그리고 마지막 예시에 보이는 것처럼 자신이 원하는 문자로도 설정할 수 있습니다.Bonus: 최신 크롬 브라우저에선 한.......

[HTML 배우기] <button>태그로 버튼 만들기 [내부링크]

오늘은 HTML에서 버튼을 만드는 방법에 대해 알아보겠습니다.<button> 태그는 기본적인 버튼을 만들 때 사용합니다.예시:위의 예시에서 기본 버튼은 스타일링을 전혀 하지 않았을 경우 입니다.다른 배경 색깔이 있는 버튼 스타일링은 아래의 css를 참고해 주세요.HTML:CSS:<button>태그 속성autofocus불린값을 설정 할 수 있다. 페이지가 로딩된 후 자동으로 버튼에 포커스 됨. 한 페이지에 한 요소만 이 속성을 가질 수 있다.disabled불린값을 설정 할 수 있다. 유저와의 상호작용을 설정한다. true 일 경우, 버튼 클릭이 안됨.form<form>의 아이디를 설정 할 수 있다. 이 버튼이 속해있는 <form>을 지정한.......

웹 접근성이란? (Web Accessibility) [내부링크]

안녕하세요. 오늘 소개해드릴 주제는 웹 접근성 (web accessibility) 입니다.많은 개발자 분들에게 다소 생소한 주제일 수도 있는데요. 웹 접근성이 무엇인지, 왜 중요한지에 대해 설명해드리겠습니다.웹 접근성 정의장애를 가진 사람들도 웹을 이용할 수 있도록 보장하는 것으로, 장애를 가진 사람들이 웹 콘텐츠를 인지하고(Perceivable), 운영하고(Operable), 이해하고(Understandable), 기술에 상관없이 이용할 수 있도록 견고한(Robust)하게 웹콘텐츠를 만드는 것어떠한 사용자(장애인, 노인 등), 어떠한 기술환경에서도 사용자가 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것위에 정의를 보시다.......

코딩 빨리 배우는 방법 [내부링크]

코딩을 배우고 싶은데, 어디서 어떻게 시작해야 할지 막막할 때 있으신가요?코딩 공부를 검색하면 너무 범위가 넓기 때문에 어떤 것을 찾고 있는지 조차 알 수 없을 때가 많을 텐데요. 수많은 언어와 자료들로 인해서 무엇을 봐야 할지 헷갈릴 때가 많습니다.목적그렇게 때문에 일단 코딩을 배우고 싶은 목적을 정하는 것이 중요합니다. 목적이 있어야 무엇을 달성할지를 알기 때문이지요.목적은 여러 가지가 될 수 있습니다. 예를 들면:- 그냥 요즘 대세이니깐, 흥미로워 보여서 시작할 수 있습니다.- 지금 하고 있는 일과 연관이 돼서 시작할 수 있습니다.- 평소에 불편한 점이 있는데 만약 소프트웨어를 만들어서 쉽게 해결할 수 있을.......

[코딩 빨리 배우기 #0] 웹 사이트 만들기 프로젝트 HTML, CSS, Javascript로 할 일 목록 (To-do List) 만들기 소개 [내부링크]

웹사이트 만들기 실전 프로젝트웹사이트를 만들고 싶지만 어디서 시작해야 할지 모를 때, 함께 따라서 만드세요. 실제로 따라서 만들면 직접 만드는 게 보이기 때문에 재밌게 배울 수 있습니다. 기본적인 HTML, CSS, Javascript지식만 있다면 따라올 수 있습니다. 여기서 배운 지식들을 토대로 더욱 복잡한 웹사이트도 만들 수 있게 됩니다.만들 웹 페이지 미리 보기앱 기능할 일 목록은 자신이 할일을 쉽게 추적할 수 있도록 도와줍니다.할 일 목록 리스트 표시할 일 추가할 일 완료 표시 (심화)할 일 지우기 (심화)목차HTML로 기본적인 페이지 만들기CSS로 스타일링 하기Javascript로 기능 만들기다 같이 실전으로 부수는 코딩'팍&#.......

[코딩 빨리 배우기 #1] HTML 으로 기본 페이지 만들기 (할 일 목록 To-do list) [내부링크]

강의 목표:html으로 할 일 목록의 기본 페이지를 만들겠습니다. 이 강의를 통해 만들 html 페이지의 모습입니다. 처음에는 사용자 입력칸, 버튼, 제목, 리스트를 추가 하겠습니다.데모:최종적으로 만든 html을 꾸민 화면이번 강의에서 만들 화면:파일 만들기:먼저 이번 프로젝트에 쓰일 파일들을 만들 '할 일 목록' 폴더를 만들어 줍니다. 여기에 프로젝트에 필요한 파일들을 만들 예정입니다.폴더 안에 이번 강의에 사용할 index.html 파일을 만들어 줍니다. (보통 웹 사이트들의 시작 지점 파일은 index.html으로 이름 짓습니다.)따라오시면서 중간중간에 index.html 파일을 크롬이나 사파리와 같은 브라우저로 열면 만드는 과.......

[코딩 빨리 배우기 #2] CSS 로 이쁘게 꾸미기 (할 일 목록 To-do list) [내부링크]

강의 목표저번 시간에는 html을 이용해서 기본 페이지를 만들었습니다. 하지만 아직 꾸미지 않았기 디자인이 완성 되지 않은 느낌입니다. 이번 시간에는 css를 이용해서 index.html 파일을 아래와 같이 이쁘게 꾸며보겠습니다.데모css 파일 만들기먼저 이번 강의에 코딩할 style.css 파일을 저번에 만든 index.html 과 같은 폴더에 만들어 줍니다. index.html 파일이 들어있는 폴더에서 오른쪽 클릭 후 새 텍스트 파일을 만든다음에 파일 이름을 style.css 로 바꿔 주시면 됩니다.css 파일을 html 파일에 연결 하기css 파일을 만들었으니 이제 html 파일에 css 파일을 <link> 태그를 이용해서 연결 하겠습니다. <link> 태그.......

[코딩 빨리 배우기 #3] Javascript로 버튼 클릭 기능 만들기 (할 일 목록 To-do list) [내부링크]

강의 목표저번 시간에는 css를 이용해서 할 일 목록 웹 페이지를 꾸미는 방법을 배워 봤습니다. 하지만 추가 버튼을 눌러도 아직 아무 일도 일어 나지 않습니다. 이번 시간에는 Javascript를 이용해서 추가 버튼에 기능을 넣도록 하겠습니다. 이제부터 자바 스크립트를 짧게 js로 부르도록 하겠습니다.데모JS 파일 만들기이번 강의에 코딩할 app.js 파일을 index.html 파일 과 같은 폴더 안에 만들어 줍니다. index.html 파일이 들어있는 폴더에서 오른쪽 클릭 후 새 텍스트 파일을 만든다음에 파일 이름을 app.js 로 바꿔 주시면 됩니다.JS 파일을 html 파일에 연결하기 <script> 태그를 이용해서 JS파일을 html에서 연결 할 수 있.......

[HTML 배우기] <input> 태그: 사용자 입력칸 [내부링크]

<input> 태그는 사용자가 데이타를 입력할 수 있는 기본 입력 칸입니다. <input> 유형(type)<input>태그는 type속성을 통해서 여러가지 형태로 사용할 수 있습니다. 만약 type속성이 설정 되지 않았다면 기본값으로 text가 설정됩니다.<input> 속성(Attributes)<input> 태그에서 가장 중요한 속성은 위에서 언급됬던 유형 속성입니다. 그 외에도 많은 속성들이 있습니다. 그중에서도 자주 사용되는 속성들을 간략히 설명하겠습니다.자 이렇게 해서 <input>태그의 유형과 속성에 대 해서 배워봤는데요. 예시를 보시고 필요한 입력 칸을 사용해 보시길 바랍니다!직접 사용하면서 배워보시고 싶으.......

[HTML 배우기] <h1> 제목 태그의 필요성 (h1, h2, h3, h4, h5, h6) [내부링크]

오늘은 <h1> 태그에 대해서 설명해 드리겠습니다.<h1> 태그는 웹 페이지의 제목을 적을 때 사용 됩니다. h태그(heading 태그)는 h1 부터 h6까지 존재합니다. <h1>이 제일 큰 글꼴이며, 글자 크기 순서 대로 <h6>이 제일 작은 글꼴입니다. 제일 위에 제목을 <h1>으로, 부제목들을 <h2> 부터 <h6>까지 사용 하시면 됩니다.예시:<h1> 태그는 자동으로 줄바꿈이 됩니다.<h1> 태그를 사용하면 글씨 크기만 커진 <p>태그와 같아 보일 수 있습니다. 하지만 웹 페이지에 제목 태그를 꼭 적어야하는 두가지 이유를 설명해 드리겠습니다.1. 검색엔진 최적화(SEO)검색엔진 최적.......