4장. 개발자가 꼭 알아둬야 할 유니코드와 문자 집합에 대한 고찰 2편

인코딩

인코딩에 대해 가장 중요한 사실 한가지는 일반 텍스트란 개념은 존재하지 않다라는 것입니다.

우리가 보는 html 문서의 head태그 에서도 문자열인코딩의 규칙을 기재해줘야 하는 것이 있다.

 

저작자표시

'개발 > 개발지식' 카테고리의 다른 글

변수(Variable)란  (0) 2021.04.21
절차지향과 객체지향 (본문수정중)  (0) 2021.04.21
W3C  (0) 2021.04.17

1편에 이어서 2편 은 박스모델 span 으로 알아보겠습니다.

<span> </span> 은 div와달리 박스모델이지만 주 은 박스모델 span 으로 알아보겠습니다.

span과 div 의 차이점은 줄바꿈의 여부입니다 .

div는 자동으로 줄바꿈이 되는 박스모델이고 span은 자동 줄바꿈이 안되어있는 박스 모델입니다.

이런 디자인을 만들수 있습니다.

저희는 이제 간단한 예제로 span이 어떻게 되어있는지 알아 보겠습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>

	<h1 style="margin:30px;"> HTML 기초배우기 </h1>

<span style="margin:10px;margin-top: 150px ;padding: 30px; padding-bottom: 150px;border:1px solid black;">첫번째 영역</span>
<span style="margin:10px;margin-top: 150px ;padding: 30px; padding-bottom: 150px;border:1px solid blue;">세번째 영역</span>
<span style="margin:10px;margin-top: 150px ;padding: 30px; padding-bottom: 150px;border:1px solid red;">두번째 영역</span>
<span style="margin:10px;margin-top: 150px ;padding: 30px; padding-bottom: 150px;border:1px solid green;">네번째 영역</span>
</body>
</html>

1편에서 보았던 마진과 패딩값을 설정 하여 span의 박스모델을 보겠습니다 . 

결과 값은 

이렇게 나온걸 볼수 있습니다. 이렇게 span과 div를 적절히 사용해서 디자인을 하면 저희가 원하는

디자인을 얻을수있습니다.

저작자표시

'개발 > HTML' 카테고리의 다른 글

HTML (오디오) 7편  (0) 2021.04.16
HTML (입력) 기초 6편  (0) 2021.04.14
HTML (박스 모델) 기초 5-1편  (0) 2021.04.11
HTML (리스트 ) 기초 3편  (0) 2021.04.10
HTML (밑줄, 기울기, 줄바꿈, 굵기)기초 2편  (0) 2021.04.09

저희는 이제 박스 모델에서 알아 보겠습니다. 

HTML에서의 박스 모델이란 content를 둘러싸고 있는 테두리를 말합니다.

여기서 content란 opening tag와 closing tag 사이에 존재하는 문장들을 의미합니다.

즉 <h1>content </h1> 태그안에 있는 내용을 말하는것입니다.

그러면 content를 둘러싸고 있는  박스 모델에서 대해서 알아보겠습니다.

 

박스 모델에는 content, padding, border, margin 이있습니다.

자세한 내용은 en.wikipedia.org/wiki/CSS_box_model확인하시면 됩니다.

이제 박스 모델 <div> </div>를 알아 보겠습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>

	<h1> HTML 기초배우기 </h1>

<div>첫번째 영역</div>
<div>두번째 영역</div>
<div>세번째 영역</div>
<div>네번째 영역</div>
 

</body>
</html>

 

이렇게 작성 하고 출력결과를 보겠습니다.

이렇게 나온걸 보면 저희는 이게 박스모델인지 구별할 수 없습니다 그래서 div 태그 속성을 들어가 테두리에 선을 그어 확인 해보겠습니다.

이렇게 라인이 생겼습니다 그러면 저희는 이 박스모델의 테두리를 제어해 저 박스의 크기도 설정 할수있습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>

	<h1> HTML 기초배우기 </h1>

<div style="width:50px; height:50px; border:1px solid black;">첫번째 영역</div>
<div style="width:250px; height:250px; border:1px solid red;">두번째 영역</div>
<div style="width:350px; height:50px; border:1px solid blue;">세번째 영역</div>
<div style="width:250px; height:90px; border:1px solid green;">네번째 영역</div>


</body>
</html>

 

이렇게 사이즈를 적용해보겠습니다.

이렇게 나오는 걸 확인 하실수 있습니다.

저작자표시

'개발 > HTML' 카테고리의 다른 글

HTML (입력) 기초 6편  (0) 2021.04.14
HTML (박스 모델) 기초 5-2편  (0) 2021.04.12
HTML (리스트 ) 기초 3편  (0) 2021.04.10
HTML (밑줄, 기울기, 줄바꿈, 굵기)기초 2편  (0) 2021.04.09
HTML( 제목, 단락) 기초 1편  (0) 2021.04.08

c#으로 윈도우 메모장에 있는 기능 대부분을 구현해보았습니다. 소스 코드는 나중에 github 저장소에 저장해놓았습니다.

github.com/jeongilhwa/NotePad_0.2

 

jeongilhwa/NotePad_0.2

Contribute to jeongilhwa/NotePad_0.2 development by creating an account on GitHub.

github.com

 

 

 

저작자표시

'개발 > c#' 카테고리의 다른 글

C# WebBrowser 자동 로그인  (4) 2021.04.15
Boxing UnBoxing  (0) 2021.04.14
c# WebBrowser 만들기  (0) 2021.04.12
Buble Sort (버블소트) 정렬알고리즘  (0) 2021.04.01
10 까지의 합구하기  (0) 2021.03.31

4장. 개발자가 꼭 알아둬야 할 유니코드와 문자 집합에 대한 고찰 1편

우리가 사는 세계 에는 여러가지 언어들이 존재한다 

하지만 많은 소프트웨어 개발자가 문자집합, 인코딩, 유니코드와같은 신비로운 세계를 빨리 따라 잡지 못한다는거에 낙남을 한다고 한다. 우리가 많이 아는 아스키 코드는 문자 하나 담는 데이터사이즈는 2바이트 밖에 되지 않습니다.

그러나 우리가 아는 세계언어 는 문자하나에 2바이트를 담는게 불가능할수있다. 각자의 나라에서 쓰는 문자는 쓸수 있어도 중국의 언어가 들어있는 문자열을 한국에서 열어봤다고 치면 이 문자가 중국말인지 한국말인지 알수가 없다

한국에서 열어본 문자열은 그저 쓰레기 값이될수 밖에없다 그래서 한국말로 궯냟쒊꿜 같은 문자로 표현될수가있다.

그러면 우리는 어떻게 이문제를 해결 해야 하는가 이다 . 그 문제 해결은 이미 나와있다. UTF-8 유니코드이다

가변길이 문자열로 이문자열 안에는 이 문자열이 한국말로 되어있는지 영어로 되어있는지 중국어로 되어있는지 알수있는 구분 코드가 있다.

저작자표시

'개발 > 개발서적' 카테고리의 다른 글

하루하루 읽다보면 늘어가는 개발지식 조엘 온 소프트웨어편 6  (0) 2021.04.16
하루하루 읽다보면 늘어가는 개발지식 조엘 온 소프트웨어편 5  (0) 2021.04.15
하루하루 읽다보면 늘어가는 개발지식 조엘 온 소프트웨어편 3  (0) 2021.04.10
하루하루 읽다보면 늘어가는 개발지식 조엘 온 소프트웨어편 2  (0) 2021.04.08
하루하루 읽다보면 늘어가는 개발지식 조엘 온 소프트웨어편 1  (0) 2021.04.07

이번 게시물에서는 링크태그와 이미지태그를 사용법을 알아 보겠습니다.

게시할 사진을 html문서가 있는 폴더에 저장 합니다.

그리고 에디터를 키고 <img> 링크를 사용해야합니다. 하지만 <img>를 사용하려면 

이미지 주소가 있어야합니다 . 우리는 img 태그의 속성 src를 사용할것입니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
	<img src="HTMLI.png">
	<h1> HTML 기초배우기 </h1>


</body>
</html>

이렇게 하고 결과를 출력하겠습니다.

이미지가 너무 크게 출력 한것을 확인 할수있습니다. 이 이미지크기를 수정을해야하는데

img 태그 속성을 중 크기를 설정해보겠습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
	<img src="HTMLI.png" width="400" height="150">
	<h1> HTML 기초배우기 </h1>


</body>
</html>

이미지가 작은것을 확인 할 수 있습니다.

그리고 다음 태그는 다른문서로 갈수 있는 태그는 <a> 태그입니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
	<img src="HTMLI.png" width="400" height="150">
	<h1> HTML 기초배우기 </h1>

<a href="https://ko.wikipedia.org/wiki/HTML"> HTML바로가기</a>

</body>
</html>

HTML바로가기 텍스트에 링크를 걸어 둘수있습니다.   

저작자표시

3장 조엘 테스트 : 더 다은 코드를 위한 12단계 2편

이 책에서 조엘은 더나은 코드를 위한 12단계를 설명했다.

  1. 소스코드 관리시스템을 사용하고 있는지.
  2. 한번에 빌드를 만들어낼 수 있는지
  3. 일일 빌드를 하고 있는지
  4. 버그 추적시스템을 운영하고 있는지
  5. 코드를 새로 작성 하기 전에 버그를 수정하는지
  6. 일정을 업데이트 하고 있는지
  7. 명세서를 작성하고있는지
  8. 조용한 작업 환경에서 일하고 있는지
  9. 경제적인 범위 내에서 최고 성능의 도구를 사용하고 있는지
  10. 테스터를 별도로 두고 있는지
  11. 프로그래머 채용 인터뷰 때 코딩 테스트를 하는지
  12. 무작위 사용편의성 테스트를 수행하고 있는지

6 . 일정을 업데이트 하고 있는지

개발 이 가장 중요한 요소라면 완료 시점을 파악하는것도 매우 중요하다 .

 

7. 명세서를 작성하고 있는지.

명세서를 작성하는 건 대다수 프로그래머들이 싫어하는 작업이다.

하지만 설계단계에서 문제를 발견하면 쉽게 몇줄만 수정할수있지만 

기능이 다 완성되고나서는 시간과 비용이 급격히 낭비가도니다 그리고 그코드를

작성한 프로그래머에게도 정신적 타격이 일어난다. 

그렇기에 코드를 작성하기전 살계 명세서를 하는것이 중요하다.

 

8. 조용한 작업 환경에서 일하고 있는지

지식 노동자에게 생산성을 극대화 할수있는 조용한 작업환경을 주는게 좋다

시끄러운 분위기에서 1분 집중력이 흟어지면 업무흐름이 끊겨 15분이라는 시간이 날라갈수가 있다.

 

9. 경제적인 범위 내에서 최고 성능의 도구를 사용하고 있는지.

기본적인 업무의 최적화 되어있는 컴퓨터와 모니터 프로그램들이 있으면 생산성을 더욱 극대화할수있다.

모니터 한대로 사용자 인터페이스 코드를 디버깅하는 작업과 

모니터 두대로 디버깅하는 작업은 업무의 효율성부터 차이가난다.

화력이 떨어지는 도구를 사용하고 그 피로가 누적이 된다면 프로그래머는 비생상적으로 바뀔수있다.

 

10. 테스터를 별도로 두고 있는지 

프로그래머 2~3명마다 별도의 테스터를 두고 있는것이 오히려 비용낭비를 줄일수있다.

사람들이 테스트의 중요성을 모르고있다.

 

11. 프로그래머 채용 인터뷰때 코딩 테스트를 하는지.

오디션을 볼때 , 학교를 들어갈때 우리는 모두 시험에 쳐서 들어간다 

프로그래머도 마찬가지 여야 한다.

 

12.무작위 사용편의성 테스트를 수행하고 있는지.

지나가는 사람을 붙잡아 방금 작성한 코드를 하용해보는 기법입니다. 

이렇게 하면 사용편의성 문제를 약 95% 를 찾아낼수 있다.

무작위 사용편의성 테스트는 사용자 인터페이스를 점점 개선 할수있는 큰장점이 있다.

저작자표시

'개발 > 개발서적' 카테고리의 다른 글

하루하루 읽다보면 늘어가는 개발지식 조엘 온 소프트웨어편 6  (0) 2021.04.16
하루하루 읽다보면 늘어가는 개발지식 조엘 온 소프트웨어편 5  (0) 2021.04.15
하루하루 읽다보면 늘어가는 개발지식 조엘 온 소프트웨어편 4  (0) 2021.04.11
하루하루 읽다보면 늘어가는 개발지식 조엘 온 소프트웨어편 2  (0) 2021.04.08
하루하루 읽다보면 늘어가는 개발지식 조엘 온 소프트웨어편 1  (0) 2021.04.07

HTML로 리스트를 표현하고 싶으면 어떻게 해야 할까요?

단순히 - , 1. 2. 이렇게 글자로 표현하는게 맞을까요?

물론 이방법도 있지만 우리는 더 HTML 스럽게 표현 하도록 배워보도록 하겠습니다.

이렇게 표현되게 작성 되어있는 태그는 <li> </li> 입니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
	<h1> HTML 기초배우기 </h1>
	<li>서울</li>
	<li>대전</li>
	<li>대구</li>
	<li>부산</li>
	
		

</body>
</html>

 

그리고 이번엔 리스트가 여러개가 붙어있는데 이리스트를 분류를 해보겠습니다.

만약 서울, 대전이랑 대구랑 부산을 분류를 하고싶을땐 어떻게 해야할까요

그건 <ul> </ul>태그입니다.  ul 태그안에 li 태그를 각각 분류해서 넣어보겠습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
	<h1> HTML 기초배우기 </h1>
	<ul>
	<li>서울</li>
	<li>대전</li>
</ul>
<ul>
	<li>대구</li>
	<li>부산</li>
</ul>


</body>
</html>

 

 

 

이렇게 태그를 분리할수있습니다.

그러면 1. 2. 3. 4. 를 번호를 붙일수 있는 리스트는 어떻게 할까요

바로 <ol> </ol> 태그입니다 ul태그와 사용법이 같습니다. 대구 부산만 ol 태그를 묶어보도록하겠습니다.

이렇게 번호가 붙어있는걸 확인 할수있습니다. 

저작자표시

'개발 > HTML' 카테고리의 다른 글

HTML (박스 모델) 기초 5-2편  (0) 2021.04.12
HTML (박스 모델) 기초 5-1편  (0) 2021.04.11
HTML (밑줄, 기울기, 줄바꿈, 굵기)기초 2편  (0) 2021.04.09
HTML( 제목, 단락) 기초 1편  (0) 2021.04.08
HTML 의 구조  (0) 2021.04.07

+ Recent posts

티스토리툴바