코딩을 지탱하는 기술 : 원리로 깨우치는 프로그래밍 기법
저자 니시오 히로카즈
역자 김완섭
출판사 비제이퍼블릭(BJ퍼블릭)
출판일 13.10.16
언어와 프로그래밍의 차이점을 잘 몰라 둘을 혼동했는데,
어렴풋이나마 별개의 존재로서 인식할 수 있는 계기가 되었다.
출판일은 상당히 오래되었으나
최신 기술을 익히려던 게 아니고 프로그래밍이 어떤 식으로 작용하는지가 궁금했었기 때문에 상당히 유용했다.
솔직히 아직 최근 기술이 어떻다더라, 하며 떠들 수준이 아녀....
이건 너무 당연하기 때문에 배우기 위해 많은 노력을 해야겠다.
트랜드야 빠르게 바뀌는 게 당연하다지만
뼈대가 되는 근본은 변하지 않는다고 생각하기 때문에 괜찮게 읽었다.
일단 얇고 가벼워서 부담이 엄청나게 덜했음.
| [book] 한 권으로 읽는 컴퓨터 구조와 프로그래밍 (0) | 2021.04.24 |
|---|
▶<a>태그
· anchor의 약자
· 하이퍼링크(hyperlink)를 만드는 태그
▶<a>태그 + href속성
<a href="링크시킬주소">텍스트</a>
<a href="링크시킬주소"><img src="이미지파일경로"></a>
▶<a>태그 내에서 사용 가능한 속성
| 속성 | 속성값 |
| href | · 링크시킬 문서, 사이트 주소 입력 |
| type | · 링크시킨 문서의 파일 유형을 알려줌 |
| target | · 링크시킬 내용이 표시될 위치 지정 |
| download | · 다운로드 링크 제공 · 링크를 통해 보여 주거나 이동시키는 것이 아니라, 다운로드를 실행함 |
| rel | · 링크시킨 문서와 현재 문서와의 관계를 알려줌 |
| hreflang | · 링크시킨 문서의 언어를 지정함 |
▶target속성의 속성값
| 속성값 | |
| _self | · 내용이 표시되는(떠오르는) 위치가 현재 윈도우창(기본값) |
| _blank | · 내용이 표시되는(떠오르는) 위치가 새로운 윈도우창 |
▶예시
<a href="http://www.gildong.com">길동닷컴</a> <a href="http://www.google.com" target="_blank">hello!</a>| [html] <img>태그 (0) | 2021.05.02 |
|---|---|
| [html] <table>, <tr>, <td>, <th>태그_기본적인 표 만들기 (0) | 2021.04.24 |
| [html] <ul>, <ol>, <li>태그_순서 목록 만들기 (0) | 2021.04.14 |
| [html] 기본 태그, html의 요소(Element), 속성(Attribute) (0) | 2021.04.12 |
| [html] <title>태그 (0) | 2021.04.12 |
▶<div>태그
· divison의 약자
· 영역을 묶는 기능
· div태그는 단독으로 사용하기보다,
id속성, class속성, style속성 등과 함께 사용한다
▶padding속성
· 특정 영역 내부(테두리 안쪽)를 얼마만큼 빈 공간으로둘지 공간설정
· 각각 영역 설정 가능
padding-top: 100px;
padding-bottom: 100px;
padding-left: 250px;
padding-right: 250px;
▶margin속성
· 특정 영역 외부(테두리 바깥쪽)를 얼마만큼 빈 공간으로둘지 공간설정
· 각각 영역 설정 가능
margin-top: 100px;
margin-bottom: 100px;
margin-left: 250px;
margin-right: 250px;
▶src속성
· source의 약자
· html문서 내에서 자바스크립트 파일을 연결시킬 때 사용
| [html] <a>태그 (0) | 2021.05.04 |
|---|---|
| [html] <table>, <tr>, <td>, <th>태그_기본적인 표 만들기 (0) | 2021.04.24 |
| [html] <ul>, <ol>, <li>태그_순서 목록 만들기 (0) | 2021.04.14 |
| [html] 기본 태그, html의 요소(Element), 속성(Attribute) (0) | 2021.04.12 |
| [html] <title>태그 (0) | 2021.04.12 |
행과 열의 방향이 헷갈려 쉽게 파악하고자 이미지화 시켰다.
기본 태그
| 01 | <table> | <table>~</table> | 표 전체 윤곽 잡기 - table 태그 내에서 표 만들기가 작성됨 |
| 02 | <tr> | <tr>~</tr> | 행(row) 만들기 |
| 03 | <td> | <td>~</td> | 각 행에 따른 셀(cell) 만들기 |
| 04 | <th> | <th>~</th> | 볼드체로 된 셀 만들기 - 제목으로 사용 할, 볼드체로 강조된 셀 만들기 |
▶04. <Th>
· 중앙정렬이 기본
· <td>, <tr>의 경우, align을 이용해 따로 지정하지 않는 이상 왼쪽정렬이 기본
표 전체에 대한 제목 만들기(어떤 표인지 나타내는 제목 만들기)
| 01 | <caption> | <caption>~</caption> | |
| 02 | <figcation> | <figcation>~</figcation> |
▶예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자기소개표1</title>
</head>
<body>
<table border="3" bordercolor="green"
width="300" height="150" align=center>
<caption>
<strong>자기소개표</strong>
</caption>
<tr bgcolor="purple" align=center>
<td colspan="4" span style="color:white">자기소개</td>
</tr>
<tr>
<th>이름</th>
<td align=center>홍길동</td>
<th>메일</th>
<td></td>
</tr>
<tr>
<th>주소</th>
<td colspan="3" align=center>땡땡시 땡땡동</td>
</tr>
<tr>
<th rowspan="2" bgcolor="skyblue">메모</th>
<td colspan="3">개발자가 되자</td>
</tr>
<tr>
<td colspan="3">열심히 합시다</td>
</tr>
</table>
</body>
</html>
▶예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자기소개표2</title>
<style>
table {
border: 1px solid #222;
border-collapse: collapse;
width: 70%;
}
thead {
background: #eee;
}
th, td{
border: 1px solid #ccc;
padding: 5px;
font-size: 0.7em;
}
</style>
</head>
<body>
<table align=center>
<caption>
<strong>자기소개표</strong>
</caption>
<colgroup>
<col>
<col span="2" style="background-color:yellow;">
<col spna="3" style="background-color: gray;">
</colgroup>
<tr style="background-color: olive;" align=center>
<td colspan="4" span style="color:white">자기소개</td>
</tr>
<tr>
<th>이름</th>
<td align=center>홍길동</td>
<th>메일</th>
<td>gil@dong.com</td>
</tr>
<tr>
<th>주소</th>
<td colspan="3" align=center>땡땡시 땡땡동</td>
</tr>
<tr>
<th rowspan="2" style="background-color:darksalmon">메모</th>
<td colspan="3">개발자가 되자</td>
</tr>
<tr>
<td colspan="3">열심히 합시다</td>
</tr>
</table>
</body>
</html>
'gil@dong.com'이 들어간 부분은, 원래 공백으로 남기고자
<td></td>를 적용시켰었다.
해당 칸에 적당한 여유가 있는 빈 공간을 나타내는 게 목적이었는데,
띄어쓰기가 어중간하게 적용된 것 같은 좁은 공간이 결과물로 나왔다.
원래 넉넉한 공백이 생겨야 하는 거 아닌가?
결과로 나온 모양새가 이상해 일단 'gil@dong.com'을 대신 넣었다.
나중에 다시 시도해봐야겠음.
위, 아래 예시의 차는 색상 적용, 테두리 굵기 같은 꾸미기에 있는데 아래쪽이 작업하기 더 편했다.
style을 이용하면 색상 리스트를 볼 수 있는데,
이를 통해 훨씬 더 풍부하고 쉽게 색을 적용시킬 수 있었음.
위쪽의 첫번째 예시의 경우, 색상 리스트가 따로 뜨지 않아 일일이 입력하느라 번거로웠다.
이 html태그들이 자바스크립트와 함께 달력 만들기에 쓰인다던데...
달마다 테이블 태그를 각각 작성해야 하는 건지,
아니면 자바스크립트를 이용해 움직일 것이므로 테이블 태그는 하나만 있어도 괜찮은 지는 아직 모르겠다.
+) 반드시 테이블 태그들을 이용해야만 하는 것은 아님!
배열을 이용할 수도 있고 다양한 방법으로 만들 수 있다.
| [html] <a>태그 (0) | 2021.05.04 |
|---|---|
| [html] <img>태그 (0) | 2021.05.02 |
| [html] <ul>, <ol>, <li>태그_순서 목록 만들기 (0) | 2021.04.14 |
| [html] 기본 태그, html의 요소(Element), 속성(Attribute) (0) | 2021.04.12 |
| [html] <title>태그 (0) | 2021.04.12 |
한 권으로 읽는 컴퓨터 구조와 프로그래밍
저자 조너선 스타인하트
역자 오현석
출판사 책만
출판일 21.04.08
방대한 분량.
한 권으로 끝낸다는 타이틀을 달고 있으니,
가볍겠네! 하고 생각했다가는 600페이지 넘는 분량에 놀랄거다. 어지간한 전공책 두께 분량을 자랑한다.
지식이 전무한 상태로 읽으니 사실 첫 회독으로 많이 들어오지는 않는다.
첫 회독은 용어들과 친해지는 단계라고 생각하고 가볍게 읽었다.
타이틀에 비전공자를 위한, 이라고 쓰여있다만
아무래도 전문용어를 소개하는 특성상 마냥 재밌고 쉬운 내용은 아니다.
책장을 전부 넘겼으니 누군가 내게 전부 이해했지? 암기 다 했지? 하고 묻는다면 전혀 아니올시다....
이 책으로 시험을 볼 게 아니니 일단은 부담없이 넘기고 나중에 한 번 더 보는 걸로.
책은 유익하다.
이렇게 코딩하면 저렇게 결과가 나와요~ 하는 내용은 아니고
프로그래밍에 관해 전반적인 소개를 하고 있다.
후에 약간의 지식을 갖춘 상태로 다시 읽는다면 더 많은 내용을 흡수할 수 있을 것 같다.
일단 어영부영 넘기고 보는데 의의를 두었기에 구체적인 서평은 할 게 없다.
책 내용의 부족이라기 보다는 내 기본기의 이유다.
아무래도 아직 얕은 기반이어서 지식 쌓기가 더디게 진행되는 느낌.
앞에서 언급했다시피 필요하다면 나중에 다시 보는 걸로.
| [book] 코딩을 지탱하는 기술 : 원리로 깨우치는 프로그래밍 기법 (0) | 2021.05.10 |
|---|