개발하는 기획자

IT & 프로그램 개발/홈페이지 만들기 → (18)건

서브라임 텍스트3 - 한글 깨짐 문제 해결하기

서브라임 텍스트3 한글 깨짐 문제 해결 요 근래 html과 css 카테고리를 가득가득 채워넣기 위해서 열심히 서브라임 텍스트3 프로그램을 만졌습니다. 사실 처음부터 발견했던 내용이긴 하지만, 딱히 해결하기 싫어서 놔두고 있었는데 이제 본격적으로 조금 다양한 작업을 해볼까 싶어서 굳이 해결하지 않았습니다. 바로 문제는 제목에서 알 수 있듯이 한글이 깨진다라는 점인데요.(한글은 위대한데...) 아무래도 개발을 공부하고 있다보면 한글은 개발과 친한 사이는 아닌 것을 절실히 느끼고 있습니다. 문제는 대략 다음과 같습니다. 일단 프로그램 코드 상에는 한글이 정상적으로 들어가는 걸 확인할 수 있습니다. 하지만 프로그램에서 저장을 한 뒤에 웹페이지로 열어보게 되면 '와장창'하고 깨져 있는 한글을 볼 수 있습니다. 뭔..
IT & 프로그램 개발/홈페이지 만들기 2020. 4. 21. 19:26

CSS는 왜 효율적인가?

지난 포스팅에 이어서 CSS가 어떤 것인지 조금 더 자세하게 알아보겠습니다. 이전에 CSS는 "웹페이지에서 스타일 요소를 정하는 규격"이라고 설명드렸습니다. 그리고 CSS 언어를 새로 만든 이유는 웹페이지를 만드는 프로그램 언어의 효율성을 위해서라고 말씀드렸죠. 사실 처음에는 많은 개발자들이 기존 HTML 언어를 사용해서 웹페이지의 시각적인 요소나 효과를 주기 위해서 노력한 적도 있습니다. 실제로 태그의 경우 문서에서 글자에 대한 시각적인 요소를 추가할 수 있는 태그 중에 하나이기도 합니다. 물론 지금은 CSS가 주류를 이루면서 잘 사용되지 않고 있는 태그입니다. 이 태그를 통한 간단한 예시로 순서대로 설명해보겠습니다. 예를 들어, 처음 개발자들은 웹페이지를 만들 때 다음처럼 하이퍼링크가 붙은 글자들이 ..
IT & 프로그램 개발/홈페이지 만들기 2020. 4. 20. 21:50

[HTML] 주석 처리하는 방법

HTML 주석 처리하는 방법 주석은 '낱말이나 문장의 뜻을 쉽게 풀이하기 위한 글'을 의미합니다. 하지만 프로그램에서 주석은 조금 다른 의미로 사용됩니다. 프로그래밍에서 주석은 '프로그램 본문 가운데 포함되어 있지만, 그 프로그램이 실행하는데 영향을 주지 않는 언어 구성 요소'를 의미합니다. 일반적으로 프로그램 코드 내부에서 개발자들이 코드에 대한 해석이나 협업 시 공유해야되는 메모, 버전, 코드에 대한 수정 방향 등을 식별하기 위해 사용됩니다. 일부 개발자들은 코드를 수정하면서 이전 버전에 대한 코드를 개발 기간동안 보관하기 위해 프로그램에 영향은 주지 않고 프로그램 코드 안에 넣어놓을 수 있는 주석을 사용하기도 합니다. 그럼 웹페이지를 구성하는 HTML 코드에서 어떻게 주석을 사용하는지 확인해보겠습니..
IT & 프로그램 개발/홈페이지 만들기 2020. 4. 20. 19:55

CSS란? - 왜 CSS가 나오게 되고 사용하고 있는 것일까?

음 HTML 카테고리에 그래도 기본적인 태그를 모두 소개한거 같아서 기분이 굉장히 좋습니다. 물론 아직도 더 많은 태그들을 소개할 수 있고 중간중간에 추가로 게시글을 작성할 것 같지만, 일단은 CSS 카테고리를 시작하게 된 것은 단순 HTML만으로 작성된 코드로 출력값을 보고 확인을 하기에는 어느정도 한계에 다가왔다 생각을 해서입니다. 어느정도 웹페이지에서 문서를 만들고 페이지를 구성하는 기본 요소인 HTML에 대해서 알아보았다 생각했고 단순 HTML로만 출력되는 화면으로는 '이게 우리가 보고 있는 웹페이지가 맞아?'라는 의문이 들 시점이라 생각해서 사용자에게 좀 더 풍성하게 웹페이지의 시각적인 효과를 줄 수 있는 CSS를 같이 병행하는 것이 좋지 않을까 생각해서 카테고리를 이 시점에 시작하게 되었습니다..
IT & 프로그램 개발/홈페이지 만들기 2020. 4. 17. 19:05

[HTML] input태그 사용하기 - 웹페이지에서 정보 입력을 위한 태그 활용

input태그 사용하기 태그는 웹페이지에서 사용자의 행동에 따른 정보를 입력 받을 수 있게 도와주는 태그입니다. 이라는 태그와 함께 사용되는 것이 일반적인데, 이 부분까지 들어가면 이제 html 본연의 영역에서 훌훌 넘어 탈출하는 부분이라 어떻게 연관지어 설명을 할지 조금 고민입니다.(다음 포스팅부터는 html이 아닌 다른 JavaScript, CSS 부분과 연계되는 부분을 풀어낼 방법을 고민해봐야겠습니다.) 태그의 구성은 3가지 속성을 포함하고 있습니다. type : 유형을 결정하는 속성 값 value : 태그의 값을 설정하는 속성 값 name : 전달되는 값의 이름을 설정하는 속성 값 위와 같이 구성되어 있습니다. 그리고 태그를 사용할 때의 형태는 다음과 같이 type, name, value 속성의 ..
IT & 프로그램 개발/홈페이지 만들기 2020. 4. 16. 18:50

[HTML] li 태그, ul 태그, ol 태그, dl 태그 사용하기

li 태그, ul 태그, ol 태그, dl 태그 사용하기 이번에는 태그가 조금 많습니다. 이 4가지 태그를 같이 소개하는 이유는 이전 포스팅과 비슷한데요. 4가지 태그가 모두 연관성이 있고, 비슷한 기능들을 하고 있기 때문입니다. 위에 소개한 4개의 태그는 동일하게 웹페이지에서 '목록'을 만들기 위해 사용되는 태그입니다. 태그 : 목록 안의 항목들에 기호를 붙여 구분하는 태그 태그 : 목록 안의 항목들에 숫자 또는 순서를 구분할 수 있는 기호를 붙여 구분하는 태그 태그 : 아무 기호없이 목록을 만드는 태그 (, 태그와 함께 사용된다.) 태그 : 목록 내부에서 항목들에 활용되는 태그 위 4가지 태그는 다음과 같이 구분됩니다. 제가 굳이 위에 처럼 리스트를 만든 이유는 바로 위와 같이 웹페이지에서 표시되게 ..
IT & 프로그램 개발/홈페이지 만들기 2020. 4. 14. 19:01

[HTML] p 태그, br 태그 사용하기 - 기능과 차이점 확인

p 태그(Tag), br 태그(Tag) 사용하기 이번에는 태그와 태그를 같이 설명해보겠습니다. 이 두가지의 태그를 같이 설명드리는 이유로는 두 가지 태그가 비슷한 기능을 하고 있기 때문입니다. 하지만 자세히 확인해보면 각 태그 별로 어느정도의 차이점이나 사용에 있어 기능의 범위가 구분이 되어 있기 때문에 같이 설명드리는 것이 좋지 않을까 싶어서 설명드립니다. 우선 기능을 소개하면 간단하게 두 가지 태그는 모두 글을 줄을 바꿔주는 기능을 하고 있습니다. 그렇다면 먼저 태그를 소개해보겠습니다. " 태그는 문단을 나누는 태그" 태그는 하나의 문단을 구성하는 태그입니다. 이전에 작성한 태그에서 예제들을 자세하게 확인해보셨다면 조금 의아한 부분을 보셨을 것 입니다. 이전에 태그를 사용할 때 'hello world..
IT & 프로그램 개발/홈페이지 만들기 2020. 4. 13. 18:50

[HTML] span 태그 사용하기

span 태그(Tag) 사용 " 태그는 웹페이지에서 스타일을 적용시키기 위한 영역을 지정할 때 사용되는 태그" 사실 이 태그를 html만 소개한 지금 시점에서 설명을 해서 이해가 될 수 있는지 잘 모르겠지만, 간단하게 CSS나 JavaScript에 대해서 이런 형태로 사용 가능하다 라는 부분을 보여주면 좋을 것 같아 순서를 거르지 않고 포스팅을 하고 있습니다. 이런 고민을 한 이유 중 가장 큰 부분은 역시 태그를 잘 활용하기 위해서는 CSS, JavaScript에 대한 이해가 있을 때 조금 더 자유롭게 활용이 가능한 부분이기 때문입니다. 하지만 그런 부분 없이 태그 내의 속성만을 가지고 일단 어떻게 사용되는 태그인지 확인을 해보는게 좋습니다. 태그는 다양하게 사용되는 태그로 이전에 웹페이지에서 많이 사용..
IT & 프로그램 개발/홈페이지 만들기 2020. 4. 9. 20:03

[HTML] img 태그 사용

img 태그(Tag) 사용 " 태그는 이미지를 삽입하는 태그" 태그는 html을 사용해서 웹페이지에 이미지를 삽입할 수 있게 도와주는 태그입니다. 속성으로는 src(경로), width(이미지의 넓이), height(이미지의 높이), alt, title로 5가지를 사용한다. src : 이미지의 경로 설정 width : 이미지의 가로 크기 설정(넓이) height : 이미지의 세로 크기 설정(높이) alt : 이미지가 표시되지 않거나 잘못된 경로일 때 출력되는 메시지 title : 이미지 소개를 위한 말풍선 표시 각 속성들은 다음과 같은 기능을 담당하고 있습니다. 간단하게 일단 이미지 하나를 'test'라는 제목으로 변경해서 프로젝트 폴더 안으로 옮겨보겠습니다. " 태그 예시" 다음과 같이 이미지 파일의 경..
IT & 프로그램 개발/홈페이지 만들기 2020. 4. 8. 18:39

자바스크립트(Java Script)가 html 코드와 어떻게 다른가?

자바스크립트(Java Script)가 html 코드와 어떻게 다른가? 앞선 포스팅에서 HTML은 웹페이지를 구성하는 구조나 형태를 만드는 마크업 언어라고 했습니다. 실제 동작을 구현하는 프로그래밍 언어로 보기에는 기능적으로나 동작적으로 부족한 부분이 있다는 의미겠죠? 그에 비해 자바스크립트(Java Script)를 검색해보면 객체 기반의 스크립트 프로그래밍 언어라고 표현되어 있는 것을 확인할 수 있습니다. "자바스크립트는 '동적'이다." 라는 표현을 어디선가는 들어보셨을 수도 있을 것입니다. 동적이라는 표현은 '움직이고 있는' 또는 '변동하는' 의 뜻을 가지고 있습니다. 그렇다면 두 개의 언어가 실제로 어떻게 다른지 간단한 예시를 통해서 확인을 해보겠습니다. "예시코드 - 1" hello world 먼저..
IT & 프로그램 개발/홈페이지 만들기 2020. 4. 7. 21:20
◀ 1 2 ▶
-->

티스토리툴바