[HTML5&CSS] Display property: block과 inline

display property 중 block과 inline에 대해 알아보자.

기본적으로 elements들은 block 아니면 inline 으로 setting된다. block은 horizontally 모든 공간을 점유한다. 반면, inline은 그 content만큼의 공간만 차지한다.
block-level element의 예는 div가 있고, inline element의 예로 span이 있다.

다음과 같이 해서 이 값을 바꿀 수도 있다.

 

[HTML5&CSS] Text based elements

다음 Text based elements를 살펴 보자.

  • Headings
  • Paragraphs
  • Inline text elements
  • Lists

HTML 안의 heading element들은 H1 에서 H6 까지 6단계까지 있다.

문단(paragraph를) 나타내는 태그는 p이다. 문단 단위로 p 태그를 사용해서 나눠준다.

Inline text elements는 여러가지가 있다.
강조(emphasized)를 원한다면 em을 사용한다. 예를 들면, 원하는게 있다면 <em>지금</em> 하라.
정말 중요하게 표시하고 싶다면, strong을 사용한다. 예를 들면, 이건 정말 <strong>중요</strong>한 거.
하이퍼링크를 사용하고 싶다면, a를 사용한다. 예를 들면, <a href=”https://blog.dasomoli.org”>다솜돌이의 블로그</a>
별 뜻 없이 어떤 내용을 다른 내용들과 나누고 싶을 때 사용하는 태그는 span이다. div와의 차이점은 inline으로 사용한다는 점이다. 일반적인 용도로 다른 text들과 다르게 특정 text의 색을 바꾸는데 많이 사용한다. 예를 들면 다음과 같다.

list는 세가지 타입이 있다. unordered list (ul), ordered list (ol), definition list (dl).

unordered list와 ordered list는 list item (li) 으로 항목을 나타낸다.

CSS를 사용해서 list-style 속성으로 square, circle, upper-alpha, upper-roman 등으로 list의 스타일을 정해줄 수 있다.

definition list (dl)은 자주 쓰이진 않는다. 어떤 용어의 정의와 설명을 서술할 때 사용한다. 용어(term)에는 dt를 사용하고, 설명(description)에는 dd를 사용한다. 예를 들면 다음과 같다.

CSS reset 하기

각기 다른 브라우저들이 서로 다르게 렌더링하기 때문에 이를 위해서 CSS를 reset한다.

Eric Mayer가 만든 좀 더 복잡한 CSS reset 코드가 있다. http://meyerweb.com/eric/tools/css/reset/ 에서 찾을 수 있다.

 

CSS text properties들을 알아보자.

두 그룹으로 나눌 수 있다. Text를 다루는 것과 Font를 다루는 그룹. 먼저 text를 보자.

color 속성은 text의 색상(color)를 바꾼다. hexadecimal 아니면 RGB로 표현하던가, 이름을 줄 수 있다. 예를 들면 다음과 같다.

text-align 속성은 left-aligned, centered 혹은 right-aligned 로 text의 정렬 방법을 정한다.

밑줄을 준다든지 하고 싶을 때는 text-decoration 속성을 준다.

취소선을 줄 때는 text-decoration에 line-through를 주면 된다.

대소문자 변환을 위해서는 text-transform 속성을 이용한다. 다음은 모두 대문자가 된다. lowercase를 쓰면 모두 소문자, capitalize를 쓰면 각 단어별 첫 글자만 대문자가 된다.

줄간격을 위해서는 line-height 속성을 이용한다. 각 줄 사이의 vertical spacing을 조절한다.

 

이제 font를 다루는 그룹의 속성들을 보자.

font-family 속성은 어떤 폰트를 쓸지를 결정한다. 첫번째 것을 시도하고 없으면 두번째, 그것도 없으면 세번째 이렇게 나아간다.

font-size 속성은 font 크기를 조절한다. px나 상대적 단위인 em을 사용할 수 있다. em을 사용하면 사용자가 정한 default font size에 따라 그 비율로 조절된다.

font-weight은 font 굵기를 조절한다. 일반적으로 굵은 (bold)를 사용할 때 사용한다. 기본값은 당연히 normal이다.

 

Linux Kernel 의 Memory barrier 구현

Linux Kernel의 프로세스 상태 변경 매크로(set_task_state, set_current_state)를 살펴보다가 ARM 아키텍처에서 다음과 같이 구현된 것을 보았다.

include/linux/sched.h

#define set_task_state(tsk, state_value)        \
    set_mb((tsk)->state, (state_value))
#define set_current_state(state_value)        \
    set_mb(current->state, (state_value))

set_mb 매크로는 시스템마다 다르게 구현되어 있는데 ARM 쪽을 따라가보면 다음과 같이 쓰여져 있다.

arch/arm/include/asm/system.h

#define dmb() __asm__ __volatile__ (“” : : : “memory”)

#define smp_mb()    dmb()

#define set_mb(var, value)    do { var = value; smp_mb(); } while (0)

do-while-0 구문에 대해서는 이 글을 참고하도록 하고, memory barrier에 대해서는 이 글을 참고하라. dmb() 의 inline assembly의 구조와 설명은 이 글을 참고하자.

참고된 글을 정리하자면, 명령이 R, W, R, W, R, W 순으로 사용된다면, 이를 하드웨어 혹은 소프트웨어 적으로 R, R, R, W, W, W 순으로 배열하는 등의 최적화를 할 수 있는데, 이 때 명령의 순서를 보장해 주는 역할로써 Memory barrier 라는 것을 구현해서 사용한다. 이는 하드웨어적으로 혹은 소프트웨어적으로 구현되는데 하드웨어적인 방법은 CPU 자체의 명령으로 구현되는 등의 방법이 사용될 수 있고, 소프트웨어적으로 구현될 때 위와 같이 구현될 수 있다.
위 구문은 gcc inline assembly의 확장으로 clobber list에 “memory”를 적어넣어 해당 명령(“” – 아무 명령도 수행하지 않음)을 수행한 후에 변경되는 것이 메모리 타입 저장장치(모든 레지스터, 모든 플래그, 모든 메모리)임을 나타낸다. gcc는 이럴경우 __asm__ __volatile__(“”: : :”memory”) 경계를 넘어가는 최적화 또는 instruction scheduling을 수행하지 않기 때문에 __asm__ __volatile__(“”: : :”memory”)를 사용하면 이전 코드의 수행 완료를 보장할 수 있고 이후 코드가 __asm__ __volatile__(“”: : :”memory”) 이전에 수행되는것을 방지 할수 있다. 별개로 volatile의 경우 읽기 연산에서 메모리에서 한번 읽어온 데이터를 레지스터에 저장해서 사용하는 것이 아닌 사용할 때마다 메모리 참조를 통해 가져오도록 한다.

NMake – Makefile 내부의 인라인 파일

NMake를 사용할 때 Makefile 내부에 파일을 내장해서(인라인 파일) 사용할 수 있다.
형식은 다음과 같다.

<<[Filename]
파일 내용
<<[KEEP or NOKEEP]

위와 같은 내용을 Makefile 내부에 써놓으면 << 들 사이의 내용이 파일로 저장되어 사용가능하게 된다. Filename 을 적으면 해당파일명으로 파일이 생성되고 적지 않으면 임의의 이름으로 임시파일이 생성된다. 또한, Make 세션 사용 후에 파일을 남겨두고 싶다면 KEEP을, 아니라면 NOKEEP 또는 아무것도 쓰지 않으면 된다.

파일 내용 안에는 $(변수) 등을 써두면 써둔 “$(변수)”가 아닌 변수로 치환되는 내용이 그대로 들어가므로 편리하다.

참고 : http://msdn.microsoft.com/ko-kr/library/seaaew50(VS.80).aspx