[코딩] Circle Square

h1{

     * 폰트
     font-family : 글꼴;
     font-style : italic;
                : normal;
                : oblique;
     font-size : xx-small;
               : x-small;
               : small;
               : medium;
               : large;
               : x-large;
               : xx-large;
               : larger;
               : samller;
               : 12px;
               : 150%;
     font-weight : bolder;                 진하기
                 : normal;
                 : bold;
                 : bolder;
                 : lighter;
                 : 100;
                 
     * 텍스트
     color : #ffffff;
           : rgb(255,255,255);
           : rgba(255,255,255,0.5);        투명도 0-투명, 1-불투명
     text-align : center;
                : justify;                 오른쪽 여백 없앰
     text-decoration : none;               밑줄 설정
     text-transform : uppercase;           대문자
                    : lowercase;           소문자
                    : capitalize;          첫글자만 대문자
     text-indent: 50px;                    첫 라인 들여쓰기
     letter-spacing : -10px;               글자 간격
     line-height : 10px;                   라인 간격
     word-spacing : 10px;                  단어 간격 
     text-shadow: 5px 10px 5px gray;       x좌표, y좌표, 투명도, 색
		   
     * display
     display : none;                        안보이게
             : block;                       줄바꿈
             : inline;                  같은 줄(width, height, margin-top,margin-bottom 무시)
             : inline-block;            같은 줄(width, height, margin-top,margin-bottom 적용)
		   
     visibility : visible;
                : hidden;
                : collapse;                 테이블 안보이게
                
     * 투명도
     opacity : 0.5;                         투명도 0-투명, 1-불투명
		   
     * box model
     width : 10px;                           content의 가로
     height : 10px;                          content의 세로
     max-width : 10px;                       창이 작아지면 자동 조절
          
     padding : 10 20 30 40;                  상 우 하 좌
          
     border : solid 5px #ffffff;
     border-style : solid;
                  : none;
                  : dotted;
                  : dashed;
                  : solid;
                  : double;
                  : groove;
                  : ridge;
                  : inset;
                  : outset;
                  : hidden;
     
     border-width : thin;
     border-color : #ffffff;
     
     border-radius : 10px 10px 10px 10px / 10px 10px 10px 10px;
        (테두리 둥글게 top-letf-x, t-right-x, bottom-l-x, b-r-x / t-l-y, t-r-y, b-l-y, b-r-y)
     border-image : ;
     box-shadow : ;
     border-collapse:collapse;
     
     margin : 10 20 30 40;                            상 우 하 좌
     margin : auto;                                   가운데 정렬
                   
     box-sizing : content-box;            width와 height가 content의 길이를 나타냄.(default값)
                : border-box;                         width와 height가 border의 길이를 나타냄.
     
     * background
     background-color : #ffffff;                     색
     background-image : url('경로'),url('경로2');    배경 이미지
     background-repeat : repeat;                     반복
                       : no-repeat;
                       : inherit;
                       : round;
                       : space;
                       : repeat-y;
                       : repeat-x;
                       : no-repeat;
     background-attachment : fixed;                   붙이는 방식
     background-position : center;                    위치
     
     * potision
     potision : static;                           (default) top, bottom, left, right에 무관.
              : relative;                              normal position 기준. 부모에 적용.
              : absolute;                            가장 가까운 부모 기준.      자식에 적용.
              : fixed;                                 view port 기준
     z-index : -1;                                     큰 값이 위로 올라온다.
     overflow : visible;                               내부 요소가 부모의 범위를 벗어날 경우
              : hidden;                    
              : scroll;                    
              : auto;                                  필요할 때만 scroll 생성
     		                    
     * float                    
     float : left;                   자식 float 속성을 주면 부모는 overflow : hidden;을 준다.
           : right;
     clear : both;
     
     * cursor
     cursor : auto;
            : text;
            : crosshair;
            : default;
            : e-resize;
            : help;
            : move;
            : n-resize;
            : ne-resize;
            : nw-resize;
            : s-resize;
            : se-resize;
            : sw-resize;
            : w-resize;
            : pointer;
            : wait;
            : progress;
     
      * ext			
      list-style-image: url('이미지 경로');             리스트에 이미지 background
     
     }
     >
</head>

<head>
    <style>
        *{}                        전체 선택자(*)
        태그명{}                    태그 선택자(태그명)
        #id{}                      id 선택자(#아이디명)
        .class{}                    class 선택자 (.클래스명)
        부모선택자>자식선택자{}      부모선택자의 자식선택자들 선택 (>)
        부모선택자 자식선택자{}      부모선택자의 자식선택자들 선택 ( )
        형제A선택자+형제B선택자{}    형제A선택자 바로 뒤의 형제 선택자B 선택(+)
        형제A선택자~형제B선택자{}    형제A선택자 뒤의 모든 형제 선택자B 선택(~)
        [속성]{}                    속성을 가진 모든 태그 선택([속성명])
        [속성="값"]{}               특정 값을 가진 속성을 가진 모든 태그 선택([속성명="값"])
        선택자[속성~="값"]{}        값을 단어로 포함하면 선택. 값 앞뒤에 공백이 있다면 선택(~=)
        선택자[속성|="값"]{}        값과 동일하거나 동일한 값으로 시작할 경우 선택(|=)
        선택자[속성*="값"]{}        값을 하나라도 포함하면 선택(*=)
        선택자[속성^="값"]{}        값으로 시작하면 선택(^=)
        선택자[속성$="값"]{}        값으로 끝나면 선택($=)
        
        a:link{}                    방문 전 (선택자:link)
        a:visited{}                 방문 후 (선택자:visited)
        a:hover{}                   마우스 올리면 (선택자:hover)
        a:active{}                  클릭한 순간 (선택자:active)
        
        input:checked{}             선택되어 지면
        input:disabled{}            비활성화 되면
        input:enabled{}             활성화 되면
        input:focus{}               마우스 커서로 선택되면
        
        p:empty{}                   비어있을 경우
        p:fist-child{}              첫 자식(첫 자식이 다른 자식이면 선택안됨)
        p:last-child{}              마지막 자식
        p:only-child{}              자식이 하나인 경우
        p:fist-of-type{}            첫 자식(첫 자식이 다른 자식이더라도 선택안됨)
        p:nth-child(n){}            n번째 자식
        p:nth-child(odd){}          홀수 자식
        p:nth-child(even){}         짝수 자식
    </style>
</head>

<head>
    * internal
    <style>
    	HTML 파일 내 스타일 내용 기입
    </style>
    
    * exteral
    <link ref="stylesheet" type="text/css" href="css파일 경로" />
        별도 .css 파일 내 스타일 내용 기입
</head>

<body>
    * inline
    <div style="">
        태그 style 속성 내 스타일 내용 기입
    </div>
</body>

* head 태그
<!doctype html> web browser에 web page 정확하게 rendering하기 위한 정보
<head>
    <meta> 추가정보
    <meta charset="UTF-8"> 문자 인코딩 방식
    <title> 제목 </title>
    <script> java script </script>
    <link> 파일 연결 ex> css 파일 연결 </link>
    <style> css </style>
    <base> 기본정보 ex> 링크정보, blank 
</head>

* body 태그
<body>
    * 텍스트 꾸밈 태그
    <h1>큰 글씨</h1>
    <h2>       </h2>
    <h3>       </h3>
    <h4>       </h4>
    <h5>       </h5>
    <h6>작은 글씨</h6>
    <b> 굵은 글씨 </b>
    <strong> 글자 강조 </strong>
    <i> 기울어진 글씨 </i>
    <address> 기울어진 글씨 </address>
    <small> 작은 글씨 </small>
    <sub> 아래 붙는 작은 글씨 ex> O2 </sub>
    <sup> 위에 붙는 작은 글씨 ex> 2의 제곱 </sup>
    <ins> 밑줄 글씨 </ins>
    <del> 삭제선 글씨 </del>
    <font size="" face="글꼴" color=""> 폰트 </font>
    
    * 하이퍼링크 태그
    <a href="이동할 페이지의 경로"> 텍스트, 이미지에 하이퍼링크 </a>
    <a href="#이동할 하이퍼링크 id"> 여기를 누르면 </a>
    <a id="id"> 여기로 온다. </a>
    <a href="페이지가 다르면 페이지 경로 추가가능#이동할 하이퍼링크 id">
    	다른페이지의 id 하이퍼링크로 이동 </a>
    <a target="_self">이 창에 열기(default)</a>
    <a target="_blank">새 창에 열기</a>
    <a target="_parent">부모 프레임에 열기</a>
    <a target="_top">이 창에 전체화면으로 열기</a>
    
    * 테이블 태그
    <table> 테이블
    	<caption>설명 달기</caption>
        <thead> 테이블 머리 고정
    		<tr>행 태그
        		<th>제목 셀 내용1</th>
            	<th>제목 셀 내용2</th>
        	</tr>
        </thead>
        <tfoot> 테이블 발 고정
        	<tr>행 태그
        		<td>셀 내용1</td>
            	<td>셀 내용2</td>
        	</tr>
        </tfoot>
        <tbody> 테이블 몸 이동
        	<tr>행 태그
            	<td colspan="합칠 열의 수">셀 내용1</td>
        		<td rowspan="합칠 행의 수">셀 내용2</td>
        	</tr>
        </tbody>
    </table>
    
    * 리스트 태그
    <ol> 숫자 순서 있는 리스트
    	<li>리스트1</li>
        <li>리스트2</li>
    </ol>
    
    <ul> 순서 없는 리스트
    	<li>리스트1</li>
        <li>리스트2</li>
    </ul>
    
    * 문단 분리 태그
    <p> 문단분리 문단간 여백 존재 </p>
    <div> 문단분리 문단간 여백 없음 문장 내용에 개행이 있다면 적용됨 </div>
    <span> 문단분리 문단간 여백 없음 문장 내용에 개행이 있다면 적용안됨 </span>
    <pre>문장에 포함된 줄바꿈 여백 그대로 표현</pre>
    <hr/> 라인생성
    <br/> 다음 문단으로 이동
    
    * 이미지 태그
    <img src="이미지파일 경로" align="" alt="이미지가 없을 때 나올 텍스트" width="" height="">
    
    * 특수문자 태그
    < : &lt;
    > : &gt;
    & : &amp;
    " : &quot;
    space(공백) : &nbsp;
</body>

* form 태그

<form method="post"(http로 데이터전송) name="" action="데이터를 처리할 프로그래밍문서"
      method="get"(url로 데이터전송-보안취약, default)> 서버에 데이터 전송
	
    <input type="text" name="" value="" id="" size="" maxlength="" placeholder="안내문구"/> 텍스트 입력창
    <input type="number" name="" value=""/> 숫자 입력창
    <input type="password" name="" value=""/> 패스워드 입력창
    <textarea name="" id="" rows="행 수" cols="열 수">여러줄 텍스트 입력 창</textarea>
    
    <input type="radio" name="radio" value="" checked /> 라디오 선택 창
    <input type="radio" name="radio" value="" checked /> 단일 선택만 가능, name이 같으면 같은 그룹
    
    <input type="checkbox" name="checkbox" value="" checked /> 체크박스
    <input type="checkbox" name="checkbox" value="" checked /> 다중선택가능, name이 같으면 같은 그룹
    
    <select name="" id="" option="" size="" multiple="multiple">
    	<option value="">목록1</option>
        <option value="">목록2</option>
    </select>
    
    <input type="button" id=""/> 버튼
    <input type="submit" value="" /> 전송 버튼
    <input type="reset" value="" /> 취소 버튼
    <input type="date" name=""/> 날짜 선택창
    <input type="file" name="" /> 파일 load 버튼
    <input type="hidden" name="" id="" value="" />
    <fieldset> 묶음 상자
    	<legend></legend> 묶음 상자 제목
    </filedset>       
</form>

bool range(double x_start, double x_end, double y_start, double y_end)
{
	if(x_start <= y_start && x_end <= y_end)
		return true;

	if (y_start <= x_start && y_end <= x_end)
		return true;

	return false;
}

x_start~x_end

y_start~y_end

사이 값 겹치는 값이 존재할 경우 true return;

                              없을 경우 true return;

int max_arr(int arr[], int arr_len) {
	int max, i;

	max = arr[0];

	for (i = 1; i < arr_len; i++) {
		if (max < arr[i])
			max = arr[i];
	}

	return max;
}

출처: new93helloworld.tistory.com/85

string lines[] = {"2016-09-15 01:00:04.001 2.0s", "2016-09-15 01:00:07.000 2s"};
int length = sizeof(lines) / sizeof(string);

- sizeof(문자열 배열)/sizeof(string)

출력 결과 : 2

#include <iostream>
#include <algorithm>

using namespace std;

int main(void)
{
	string cities1[] = { "Jeju", "Pangyo", "Seoul", "NewYork", "LA", "Jeju", "Pangyo", "Seoul", "NewYork", "LA" };

	int length = sizeof(cities1) / sizeof(string);

	for (int i = 0; i < length;i++)
		transform(cities1[i].begin(), cities1[i].end(), cities1[i].begin(), tolower);


	for (int i = 0; i < length;i++)
		cout << cities1[i] << endl;

	return 0;
}

 - algorithm의 transform()를 이용.

1. #include <algorithm> 추가

2. using namespace std; 추가

3. transform(문자열.begin(), 문자열.end(), 문자열.begin(), tolower);

 문자열 값이 소문자로 변경되어 해당 문자열에 입력된다.

#include <iostream>
#include <algorithm>

using namespace std;

int main(void)
{
	string cities1[] = { "Jeju", "Pangyo", "Seoul", "NewYork", "LA", "Jeju", "Pangyo", "Seoul", "NewYork", "LA" };

	int length = sizeof(cities1) / sizeof(string);

	for (int i = 0; i < length;i++)
		transform(cities1[i].begin(), cities1[i].end(), cities1[i].begin(), toupper);


	return 0;
}

 - algorithm의 transform()를 이용.

1. #include <algorithm> 추가

2. using namespace std; 추가

 - transform(문자열.begin(), 문자열.end(), 문자열.begin(), toupper);

 문자열 값이 대문자로 변경되어 해당 문자열에 입력된다.

#include <string>
using namespce std;
int main(void)
{
	string s="A";
    char lower = tolower(s);
    
    char upper = toupper(lower);
    
    return 0;
}

도구 - 옵션

텍스트 편집기 - C/C++ - 줄 번호 Check