UINT WINAPI ThreadFunction(LPVOID pParam)
{
std::cout << "ThreadFunction() - Begin" << std::endl;

if (pParam)
{
char cInput = 0;
int i, j, nIndex = 0;

THREAD_PARAM* pThreadParam = (THREAD_PARAM*)pParam;
bool* pbExitThread = pThreadParam->pbExitThread;
HANDLE hEvent1 = pThreadParam->hEvent1;
HANDLE hEvent2 = pThreadParam->hEvent2;
HANDLE hStartEvent = pThreadParam->hStartEvent;

char* pInput = pThreadParam->pInput;

SetEvent(hStartEvent);

while (1)

.......

}

 


int main()

{

    THREAD_PARAM ThreadParam;
    bool bExitThread = false;
    char cInput = 0;

    ThreadParam.pbExitThread = &bExitThread;
    ThreadParam.pInput = &cInput;

    HANDLE hEvent1 = CreateEvent(NULL, FALSE, FALSE, NULL);
    HANDLE hEvent2 = CreateEvent(NULL, FALSE, FALSE, NULL);
    HANDLE hEvent3 = CreateEvent(NULL, FALSE, FALSE, NULL);

    HANDLE hStartEvent = CreateEvent(NULL, FALSE, FALSE, NULL);

    ThreadParam.hEvent1 = hEvent1;
    ThreadParam.hEvent2 = hEvent2;
    ThreadParam.hStartEvent = hStartEvent;

       std::cout << "main() - Begin" << std::endl;
     UINT nThreadId1 = 0;
     HANDLE hThread1 = (HANDLE)::_beginthreadex(
         NULL,
         0,
         ThreadFunction,
        (LPVOID)&ThreadParam,
        0,
        &nThreadId1);

  if (hThread1 == NULL)
  {
       std::cout << "main() - _beginthreadex() 1 failed" << std::endl;
       return 1;
  }

  WaitForSingleObject(hStartEvent, INFINITE); =>> 첫 쓰레드 실행시작할 때까지 대기 => 이 코드 없으면 두번째 쓰레드와 순서가 바뀌어 실행될 수 있음

  ThreadParam.hEvent1 = hEvent2;
  ThreadParam.hEvent2 = hEvent3;

  UINT nThreadId2 = 0;
  HANDLE hThread2 = (HANDLE)::_beginthreadex(
     NULL,
     0,
    ThreadFunction,
    (LPVOID)&ThreadParam,
    0,
    &nThreadId2);

  if (hThread2 == NULL)
  {
     std::cout << "main() - _beginthreadex() 2 failed" << std::endl;
     return 1;
  }

   WaitForSingleObject(hStartEvent, INFINITE);

........

}

 

* 같은 쓰레드 함수를 서로 다른 쓰레드가 호출 가능

* 복수개 쓰레드 실행 시킬 때 순차적으로 실행되길 원하면 이벤트를 이용해서 쓰레드 실행을 확인하면서 다음 쓰레드 생성하도록 처리

https://m.blog.naver.com/chaotic/221529485522 블로그 글을 참조합니다.

 

Visual C++ 6.0에서 디버깅 시 OLE32.dll 오류 해결

Windows 10에서 Visual Studio C++ 6을 사용하여 debug 을 하던 중에 Break를 잡은 다음 'step i...

blog.naver.com

윈도우10에서 visual c++ 6.0 디버깅시 브레이크포인터에 걸린 상태에서 다음스탭을 진행하기 위해서 F11(Step Info), F10(Step Over)등을 실행하면 Unhandled Exception 에러메세지가 뜨면서 더이상 디버깅 진행이 불가능해진다.

 

해결방안은 아래와 같다

Tools / Options 메뉴를 선택한다

Options 설정창에서 Debug 탭을 선택한 후 해당 탭내에서  우측하단에 Just-in-time debugging을 체크하고 그 밑에 OLE RPC debugging 항목의 체크를 푼다

 

이후 디버깅을 실행하면 정상동작한다

잊을 것 같아 모바일웹 디버깅을 위해 처리했던 내용을 기록한다. (현재 작업 상황에 맞게 처리한 것으로 일반적인 경우와 다를 수 있다)

1. 로컬 pc에서 웹소스까지 포함해서 실행할 수 있는 웹서버 환경을 구성해야 한다.

=> node js 설치하고 package.json 파일 내에 아래 빨간글씨 부분을 본인 pc ip로 지정한다.

"scripts": {

    "test""echo \"Error: no test specified\" && exit 1",

    "watch""webpack --watch",

    "dev""cross-env NODE_ENV=development webpack-dev-server --d --port 8080 --host XXX.XXX.XXX.XXX",

    "kiwoom""cross-env NODE_ENV=production PROD_MODE=real webpack --progress --hide-modules",

    "build""cross-env NODE_ENV=production PROD_MODE=dev webpack --progress --hide-modules",

    "lint""eslint --ext .js src"

  },

 

visual studio code 터미널창에서 npm run dev로 웹서버 실행한다.

로컬pc 가 가정용 와이파이 기기에 접속되어 ip를 자동할당 받은 경우 모바일도 같은 와이파이 네트워크에 접속한다.

모바일웹 브라우저에서 로컬 pc 아이피로 주소를 입력해서 테스트하려는 웹페이지 오픈한다.

예를 들면,

XXX.XXX.XXX.XXX:8080/test_html 

 

모바일웹브라우저에서 해당 웹페이지가 오픈되면 1단계 성공

 

2. 로컬pc에 모바일 usb 드라이버를 설치한다.

설치방법 참조: https://developer.android.com/studio/run/oem-usb?hl=ko

 

OEM USB 드라이버 설치  |  Android 개발자  |  Android Developers

몇몇 OEM 웹사이트로 연결되는 링크를 찾아, 자신의 기기에 해당하는 USB 드라이버를 다운로드할 수 있습니다.

developer.android.com

 

3. 모바일 설정 오픈 => 개발자 옵션 => USB디버깅 체크

(LG는 개발자 옵션이 활성화되있더라도 한번 비활성화 한 후 활성화를 해야 함)

 

4. 모바일폰을 pc와 usb로 연결하고 모바일 웹페이지 오픈상태에서 pc 브라우저 오픈하고 아래 주소 입력한다.

chrome://inspect/#devices

 

5. 아래 그림과 같이 pc웹 브라우저에 디버깅할 주소가 보이면 빨간색 사각형 영역 inspect을 클릭한다.

6. 크롭 디버깅창이 오픈된다.

1) CSS 포지셔닝이란

 

css포지셔닝은 브라우저 화면 안에 각 컨텐츠 영역을 어떻게 배치할지를 결정하는 것을 말하며 관련 속성으로는 

 

float와 position 속성이 있다.

 

 

 

2) box-sizing 속성

 

box-sizing 속성은 박스 너비 기준 정하는 속성이다.

 

즉, width 속성값을 컨텐츠 영역너비값으로 사용할지, 패딩과 테두리까지 포함시킬지 결정할 수 있다.

 

기본형은 아래와 같다.

 

box-sizing: content-box | border-box

 

속성값 설명
content-box width속성 값을 컨텐츠 영역 너비 값으로 사용
border-box width속성 값을 컨텐츠 영역에 테두리까지 포함시켜 사용

 

3) float 속성

 

float속성은 왼쪽이나 오른쪽으로 배치시키는 속성이다.

 

기본형은 아래와 같다.

 

float : left | right | none

 

속성값 설명
left 해당 요소를 문서의 왼쪽으로 배치
right 해당 요소를 문서의 오른쪽으로 배치
none 좌우 어느 쪽으로도 배치시키지 않는다

아래 예제 소스와 결과를 보여준다.

div태그는 블록레벨요소로서 기본적으로 한 줄에 하나씩만 표현되지만 float속성을 주게 되면 한 줄에 여러개 표현이 가능하게 된다. 

위의 예제는 3개 div중에서 2개 div는 float속성에 left를 마지막 하나는 right 값을 지정했을 때 결과를 보여준다.

 

아래 예제는 3개 div중에서 1개는 float:left, 1개는 float:none, 나머지 하나는 float:right 값 지정했을 때 소스와 결과를 보여준다.

결과에서 볼 수 있듯이 float:none 결과값은 해당 div태그를 해당 줄의 끝까지 가도록 설정된다. 그 다음 div는 float:right 지정하였으며 결과는 새로운 줄에서 오른쪽에 위치하게 된다.

 

4) position 속성

position 속성은 웹문서 안에 요소들을 자유자재로 배치할 수 있게 하는 속성이다.

기본형은 아래와 같다

position : static | relative | absolute | fixed

속성값 설명
static 요소를 문서의 흐름에 맞추어 배치한다
relative 이전 요소에 자연스럽게 연결해 배치하되 위치를 지정할 수 있다
absolute 원하는 위치를 지정해 배치한다.
fixed 지정한 위치에 고정해 배치한다

* static

position 속성의 기본값이며 요소를 나열한 순서대로 배치한다. 특정위치를 지정하는 속성들(top, left 등) 은 사용할 수 없다. 단, float 속성은 함께 사용할 수 있다.

 

* relative

요소를 나열한 순서대로 배치할 수 있으며 특정위치를 지정하는 속성들(top, left 등)을 함께 사용할 수 있다.

위치를 지정하는 속성을 사용할 때 좌표 계산은 static으로 설정시 배치되어야 할 위치를 기준으로 하여 이동하게 된다.

relative 관련 예제로 소스와 결과를 올린다

 

아래 예제는 relative 사용하지 않은 경우를 먼저 보여준다.

소스에서 id1과 id2의 width를 각각 30%, 70%로 주었고 float:left, float:right로 각각 설정했다

width를 30%, 70% 설정했다는 의미는 브라우저 폭 기준으로 30%, 70% 크기를 계산해서 width로 셋팅했다는 의미이다.따라서 결과적으로 "박스1" 블록이 브라우저 전체폭의 30%를 차지하고 바로 옆에 이어서 "박스2"블록이 70%폭을 차지하면서 배치된다.

 

이 상태에서 박스2의 left 시작 위치를 박스1에서부터 10px을 띄우고 싶은 경우

position : relative로 설정한 후 left : 10px; 로 지정할 수 있다. 이렇게 하면 박스2의 원래 위치 기준으로 10px 이동하여 배치된다.

 

아래는 해당 소스와 결과이다.

* absolute 

해당 속성을 사용하면 left, right, top, bottom 속성값을 이용해 요소를 원하는 위치에 배치할 수 있다.

이때 기준이 되는 위치는 가장 가까운 부모 요소 중 position속성이 relative 또는 absolute인 요소이다.

그래서 보통 absolute 사용하려면 해당 요소를 감싸는 div를 만들고 position : relative 또는 absolute로 지정한 후 사용한다.

아래는 예제로 소스와 결과를 보여준다.

 

위 예제에서 아이디 RB, LT 요소들은 부모 요소인 child_container 위치를 기준으로 배치된다.

또한 child_container 요소는 부모요소인 container 위치를 기준으로 배치된다.

만일, child_container의 position이 static이라면 RB, LT 요소들은 relative나 absolute 속성값을 가지고 있는 가장 가까운 부모 요소인 container 요소의 위치를 기준으로 배치된다.

 

* fixed 속성값

fixed 속성값은 문서의 흐름과 상관없이 위치를 좌표로 결정하지만 좌표는 브라우저 창 기준이 된다.

따라서 브라우저 창이 스크롤 되더라도 그대로 위치를 유지한다.

'프로그래밍 > html+css' 카테고리의 다른 글

css와 박스모델  (0) 2019.07.28
텍스트 관련 스타일  (0) 2019.07.27
css와 자바스크립트를 이용한 우측툴바 컨트롤 제작  (0) 2019.07.04

1. 블록 레벨 요소와 인라인 레벨 요소

CSS 박스 모델이란 박스 형태의 모델이며 이 박스모델들이 모여 웹 문서를 이룬다.

박스모델 안에는 마진, 패딩, 테두리 등의 속성에 따라 여러 겹의 박스가 존재한다.

 

박스모델은 "블록레벨요소" 인지 "인라인레벨요소"인지에 따라 박스모델을 배치하는 방법이 다르다

 

블록레벨요소는 혼자 한 줄을 차지하는 요소이다. (해당 요소의 너비가 100%라는 것을 의미)

따라서 왼쪽, 오른쪽에 다른 요소들이 올 수 없다.

너비, 마진, 패딩 등을 이용해 크기나 위치를 지정하려면 블록레벨요소이어야 한다.

<DIV>, <P> 등이 블록레벨요소의 대표적인 태그이다.

 

인라인레벨요소는 줄을 차지하지 않는 요소이다. 즉 화면에 표시되는 컨텐츠만큼만 영역을 차지하며 나머지 영역은 다른 요소가 올 수 있다.

즉 한 줄에 여러 개의 인라인 레벨요소를 표시할 수 있다.

<IMG>, <STRONG> 등이 인라인레벨요소의 대표적 태그이다.

 

종류 해당 태그
블록레벨태그 <P>,<H1>~<H6>,<ul>,<ol>,<div>,<blockquote>,<form>,<hr>,<table>,<fieldset>,<address>
인라인레벨태그 <img>,<object>,<br>,<sub>,<sup>,<span>,<input>,<textarea>,<label>,<button>

예를 들면,

<h3> css 박스모델</h3> <p>블록레벨태그와 <span>인라인레벨태그</span>로 나눌 수 있다. </p>

 

위 문서를 브라우저에서 실행해 보면, <p>태그가 나오면서 줄이 바뀌었다. <h3>, <p>는 블록레벨태그이기 때문이다.

<span> 태그가 나올 때 줄이 바뀌지 않고 <p> 태그와 함께 한 줄에 표현되었다. 그 이유는 인라인레벨태그이기 때문이다.

 

2. 박스모델 - 박스 형태의 컨텐츠

박스모델은 컨텐츠 영역, 패딩, 테두리, 마진 영역으로 나눠 볼 수 있다.

패딩과 테두리, 마진은 각각 상하좌우 네 방향으로 스타일을 따로 지정할 수 있다.

 

3. width, height 속성 - 컨텐츠 영역의 크기 지정

기본형은 다음과 같다

width : <크기>|<백분율>|auto

height:<크기>|<백분율>|auto

크기는 px, cm 같은 단위와 함께 수치로 지정

백분율은 박스모델을 포함하는 부모 요소를 기준으로 백분율로 지정하며 %단위와 지정

auto는 컨텐츠 양에 따라 자동으로 결정되며 기본 설정값이다.

 

4.실제 컨텐츠 크기 계산

css박스모델에서 width속성은 컨텐츠영역의 너비를 의미한다. 따라서 실제 박스가 차지하는 너비는 width값에 좌우패딩두께와 좌우 테두리두께를 합쳐 계산

 

5.display 속성 - 화면 배치 방법

display 속성을 요소가 화면에 보여지는 방식을 지정한다. 이것을 사용하여 블록레벨요소를 인라인레벨요소로, 인라인레벨요소를 블록레벨요소로 바꿀 수 있다.

기본형은 다음과 같다.

display : none | contents | block | inline | inline-block | table | table-cell 등

1) block 속성값

display:block 으로 지정하면 해당 요소를 블록레벨요소로 지정하는 것이다.

예를 들면, <img>, <sub> 등의 요소들은 기본이 인라인레벨요소인데 이런 요소들에 display:block을 지정하면 블록레벨요소가 되어 한 줄에 하나씩만 보여지게 된다.

2) inline 속성값

display:inline으로 지정하면 해당 요소를 인라인레벨요소로 지정하는 것이다.

예를 들면,

<nav>

  <ul>

     <li>사과</li>

     <li>배</li>

     <li>참외</li>

  </ul>

</nav>

 

위의 경우 사과, 배, 참외는 세로 방향으로 리스트 형식으로 보여지게 된다.

가로방향으로 나열되도록 수정하기 위해서 style 태그에  다음과 같이 지정할 수 있다.

<style>

  nav ul li{

     display : inline;

</style>

 

3) inline-block 속성값

 인라인레벨요소로 지정되면 너비나 높이, 마진 같은 박스모델 값이 정확히 적용되지 않는다.

 요소를 인라인레벨로 배치하면서 너비,높이, 마진 같은 박스모델 값도 적용되길 원하는 경우 inline-block 속성값을 사용할 수 있다.

 

 예를 들면, 

inline 만 적용한 경우 소스와 결과이다.

 

inline과 margin을 함께 적용한 경우 소스와 결과이다.

inline에 margin을 적용한 경우 좌, 우 margin만 적용되었으며 상, 하 margin은 무시되었다.

 

inline-block에 margin을 적용한 경우 소스와 결과이다.

inline-block인 경우 상하좌우 margin이 모두 적용되었다.

 

결론은 한줄에 여러요소들을 표현하면서 margin, 테두리 등의 속성을 지정하려면 inline-block으로 셋팅하면 된다.

 

4) none 속성값

none 속성값은  공간을 차지하지 않고 사라지게 한다.

비슷한 속성으로 "visibility:hidden" 이 있으나 이것은 공간은 차지한 상태에서 보이지만 않게 한다.

예를 들어, 반응형 웹사이트 제작시 pc에서는 보이게 하고 모바일에서는 사라지게 하는 경우 사용할 수 있다.

 

 

 

font-family 기능 글꼴을 지정하는 속성
기본형 font-family:<글꼴이름>[,<글꼴이름>,<글꼴이름>]
예제

body { font-family:"맑은 고딕","돋움","굴림"}

"맑은 고딕" 글꼴이 설치되어 있지 않은 경우 "돋움"글꼴을 사용, 그것도 설치되어 있지 않으면

"굴림"을, 그것도 아니면 시스템에 설치되어 있는 기본글꼴을 사용하게 된다

설명

해당 속성은 상속된다. 만일 body 태그에서 사용하면 해당 폰트가 문서 전체에 적용되며 특정 영역에 다른 폰트를 사용하려면 해당 요소에서 폰트를 따로 지정하면 된다.

@font-face 기능 웹폰트란 웹문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드시키는 방식. 결국 로컬pc에 해당 글꼴이 없더라도 제작자가 원했던 글꼴로 화면에 보여지게 된다.
기본형

@font-face{

 font-family:글꼴이름;

 src: url("글꼴파일경로") format("파일유형")

}

예제

//폰트정의

@font-face{

  font-family:"testfont";

  src: local("trana"),

       url("trana.eot"),

       url("trana.woff") format("woff")

       url("trana.ttf") format("truetype");

}

//위에서 정의한 글꼴을 사용하여 클래스 정의

.my-font{

  font-family:"testfont","굴림";

}

 

<body class="my-font"> 

<p> test </p>

</body>

 

"trana.ttf" 영문폰트 파일을 trana.eot 와 trana.woff 파일로 변환한 후 "testfont"라는 자신만의 글꼴 이름을 정의한다.

ttf 파일은 용량이 크기 때문에 대부분의 브라우저에서 지원하는 woff글꼴 파일을 먼저 선언하고 ttf파일은 그 후 선언한다. 그리고 ie8 이하 버전에서는 eot 파일만 지원하므로 woff보다 먼저 선언한다 그리고 eot는 포멧은 따로 선언하지 않는다

설명

웹폰트 제공 사이트에 없는 특별한 폰트를 사용해야 하는 경우 해당 글꼴 파일 ttf 형식을 woff 와 eot 형식으로 변환하여 파일사이즈를 줄인다.

woff는 http://people.mozilla.com/~jkew/woff/ 이용하여 변환,

eot는 http://eotfast.com 이용하여 변환

 

주의사항: 글꼴 저작권 체크 (ttf 구입했더라도 웹폰트 사용여부는 확인해봐야 함)

font-size 기능

글자 크기를 조절하는 속성

기본형

font-size:<절대크기>|<상대크기>|<크기>|<백분율>

절대크기: 브라우저에서 지정한 글자 크기

( xx-small | x-small | small | medium | large | x-large | xx-large )

상대크기 : 부모요소의 글자크기를 기준으로 더 크게 또는 더 작게 표시 (larger | smaller)

크기 : 브라우저와 상관없이 글자 크기 직접 지정(단위함께 표기 em, px, pt 등)

         em : 해당 글꼴의 대문자M너비 기준으로 크기 조절

         ex : 해당 글꼴의 소문자 x의 높이를 기준으로 크기를 조절

         px : 픽셀, 모니터에 따라 상대적 크기

         pt : 포인트, 일반 문서에서 많이 사용하는 단위

백분율 : 부모요소 글자 크기를 기준으로 해당하는 %를 계산해 표시(%와 함께 표기) 

예제

<style>

 h1{ font-size:3em;}

 p{font-size:1em;}

</style>

<body>

<h1> 제목 </h1>

<p> 단락 </p>

</body>

 

body에서 폰트크기를 지정하지 않은 상태이므로 글자의 기본크기는 16px이 적용된다

이 상태에서 1em은 16px가 되며 3em은 48px가 된다

설명

모바일까지 함께 고려해서 제작을 해야 한다면 px보다 em을 사용할 것

 

'프로그래밍 > html+css' 카테고리의 다른 글

css 포지셔닝과 주요속성들  (0) 2019.07.28
css와 박스모델  (0) 2019.07.28
텍스트 관련 스타일  (0) 2019.07.27

+ Recent posts