CSS div의 크기 조정에 대해(div의 width, height 속성에 대해)


웹 페이지를 구성함에 있어서 보이지 않는 box 형태로 다양한 레이아웃을 구성할수 있게 도와주는 div의 가로의 넓이를 지정하는 속성이 width, 세로의 높이를 지정하는 속성이 height이다.

이들 속성에 값을 지정할 때의 가장 대표적인 단위가 pixel이다.


만일 percentage로 지정하면 div의 크기는 브라우저의 창 크기에 상대적인 크기로 설정되고

em단위로 지정하면 div 안에 있는 글자(text)의 크기에 기반해서 dive의 크기를 설정한다.

요즘은 화면의 크기가 다양한 기기들에 대응하기 위해 percentage나 em 단위를 많이 사용하는 추세이다.

아래는 HTML 코드 조각이다.


<div>

   <p>'그들이 움직인다'…어나니머스, IS에 '선전포고'

         "전세계 회원들이 너희를 추적할 것이다. 당신들을 찾아내 도망가지 

         못하게 할 것이라는 걸 알아야만 한다."</p>

</div>



아래는 CSS 코드 조각이다.


div.box {

height: 300px;

width: 300px;

background-color: #99ccff;}


p {

height: 75%;

width: 75%;

background-color: #ccff66;}


위의 코드에서 div의 가로 길이가 300pixel, 세로 높이가 300pixel이고

div 안에 있는 paragraph가 75%인데 이는 paragraph가 속해 있는 div의 크기 300pixel에 대한 75%이다.

따라서 paragraph의 크기는 225pixel에 해당된다.




이클립스로 개발시 소스 코드에 라인 번호가 붙여지는 건 매우 필요하고 요긴하다.

근데 이클립스의 디폴트가 코드의 라인 번호가 안 붙여지는 것으로 되어 있다.

해법은, 


Window  ⇒  Pereference  ⇒  General  ⇒  Editors  

⇒  Text Editors  ⇒  Show line numbers를 체크 표시









지역변수에 final이 붙을 때의 의미에 대해


만일 아래 코드에서 mText에 final이 붙지 않은 상태에서  

layout.setOnTouchListener()에서 mText를 사용하고자 하면

컴파일 단계에서 아래와 같은 에러가 발생한다.


Cannot refer to a non-final variable mText inside an inner class defined in a different method


이유가 뭘까? 같은 onCreate() 메소드 안에 있는 변수인데...?

그 이유는...


public class AAAActivity extends Activity  {

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        

        final TextView mText = (TextView)findViewById(R.id.textV);

        

        LinearLayout layout = (LinearLayout)findViewById(R.id.linear);

        layout.setOnTouchListener(new View.OnTouchListener() {

          public boolean onTouch(View v, MotionEvent e) {

              mText.setText("Touched"); //에러 발생

                return true;

          }

        });

    }


  • mText는 전역변수도 아니고, onTouch()의 지역 변수도 아니며 onCreate()의 지역 변수로 선언되어 있다.
  • 리스너인 onTouch()는 onCreate()에 속한 지역 메서드가 아니라는 점을 주의해야 한다. onCreate()가 실행시에 onTouch()가 같이 실행되는 것이 아니라 터치 이벤트 발생시 실행할 메스드로 등록만 할 뿐이다.
  • 에러가 발생하는 이유는 mText 변수는 onCreate()가 리턴되면 사라지는 지역 변수이다.  반면 onTouch()는 터치 리스너로 등록되며 onCreate()가  리턴된 후에라도 이벤트가 발생하면 언제든지 호출될 수 있다. onTouch()가 호출되었을 때는 mText 변수가 존재하지 않으므로 mText의 실제값을 참조할 길이 없다. 미래에 호출될 리스너에게 현재의 지역 변수값을 전달하는 것은 불가능하다.
  • 그런데 여기서 지역 변수에 final을 붙이면 더 이상 변경할 수 없는 상수가 되므로 onTouch()를 등록하는 시점에 그 값을 분명히 전달할 수 있다. 




xml의 layout_gravity에 대한 숨겨진 규칙


안드로이드 앱 개발을 하다보면 

xml 레이아웃 파일에서 조정하는 작업들이 

생각처럼 잘 안 먹혀 들어갈 때가 있다.

특히 layout_gravity에 대해 작업할 때

그런 경험을 자주 하게 된다.

그 이유는 이런 개념 때문이다.



<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

    <Button

           android:id="@+id/btnPlus"

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:padding="10dip"

           android:text=" 테스트 "

           android:layout_gravity="center"

           android:textSize="25sp" />

</LinearLayout>


LinearLayout의 orientation이 vertical일 경우 

Button의 layout_gravity는 수평 관련 속성만 적용이 된다.

예를 들어 layout_gravity="left" 혹은 center_horizontal 혹은 right와 같이 수평 관련 속성만 적용이 된다.

수직 관련 속성은 적용이 안된다. 

예를 들어서 layout_gravity="bottom", 혹은 top...은 적용이 안된다.


만일 orientation이 horizontal이라면 

Button의 layout_gravity는 수직 관련 속성만 적용이 된다.

bottom, top, center_vertical


이 이야기의 핵심은 LinearLayout에서 첫 번째 방향을 설정했으면(만일 수평이면) 두 번째 방향 설정(layout_gravity)에서는 수평이 상태에서 그 수평 중 어느 위치로 움직일 것인지를 결정하는 것만 허용이 된다는 것이다.

즉 수평이 첫 번째 설정 값이면(LinearLayout에서) 그 수평 중 top에 놓일지, bottom에 놓일지, center_vertical에 놓일지만 결정한다는 뜻이다.



소프트웨어 개발시 팀 단위 작업시 특히 필요한 버전관리 혹은 소스 코드 관리(source code management, SCM) 도구로 각광받고 있는 Git에 대한 간단한 용어정리이다.


▶ HEAD

작업 중인 위치(branch)를 가리키는 가상의 커서를 의미


▶ clone

웹상에 있는 원격 repository에 있는 내용을 local의 내 PC에 그대로 복사본을 만드는 작업


▶ commit

local의 내 PC에서 수정, 변경한 내용을 원격의 repository에 push하기 전 단계인 staging 단계(index 단계)에 올리는 작업.

이 단계도 아직은 local PC에서 이뤄지는 작업이다. 따라서 인터넷이 연결되어 있지 않아도 작업이 수행된다.

이렇게 commit이 된 내용이라야 비로소 원격 repositiory로 push할때 변경된 내용이 원격 repository에도 적용이 된다.


▶ push

local PC에서 수정 후 commit한 내용을 원격의 repository에 전송하는 작업


▶ pull

원격의 repository에 다른 사람이 수정/추가한 내용을 내 local PC에 수정 내용을 적용하는 작업

pull 을 실행하면, 원격 저장소에서 최신 변경 이력을 다운로드하여 내 로컬 저장소에 그 내용을 적용한다.

이때 branch 병합과 같은 병합이 발생한다.


▶ checkout

현재 선택된 branch가 아닌 다른 branch에서 작업하고자 할때, branch를 변경하고자 할때 사용


▶ stash

파일의 변경 내용을 일시적으로 기록해두는 영역이다. stash를 사용하여 작업 트리와 인덱스 내에서 아직 commit하지 않은 변경을 일시적으로 저장해 둘수 있다.


▶ fetch

 pull을 실행하면 원격 저장소의 내용을 가져와 자동으로 병합작업을 실행하지만 단순히 원격 저장소의 내용을 확인만 하고 로컬 데이터와 병합은 하고 싶지 않을 경우 fetch 명령어를 사용할수 있다.




타이틀바 없애고 전체화면, 화면 가로로(혹은 세로로) 고정하는 법


안드로이드 앱 실행시 전체화면으로 보이게 하고, 타이틀 바 없애고 화면을 가로로 고정할려면

소스 코드 상에서도 처리할 수 있으나 아래와 같이 Manifest 파일에서 설정할 수 있다.

소스 코드 상에서는 실행 시점에 처리한다면 Manifest 파일에서 설정하면 컴파일 단계에서 미리 처리를 한다.


AndroidManifest.xml에 다음을 추가


        <activity

            android:name=".TestActivity"

            android:label="@string/app_name"

            android:configChanges="orientation|keyboardHidden"

            android:theme="@android:style/Theme.NoTitleBar.Fullscreen"

            android:screenOrientation="landscape" >


화면을 전체 화면과 타이틀 바를 없애는 기능이

android:theme="@android:style/Theme.NoTitleBar.Fullscreen"

이고


화면을 가로고 고정하는 방법이 

android:screenOrientation="landscape"

이다.

만일 화면을 세로로 고정하고자 한다면 

android:screenOrientation="portrait"

이다.


혹은 앱만이 아닌 화면 자체를 세로로 뒤집을려면

android:screenOrientation="reversePortrait"

과같이 하면 된다.







CSS line-height, letter-spacing, word-spacing 속성에 대해


line-height

⇒ 줄과 줄 사이의 간격을 조정하는 속성


letter-spacing

⇒ 글자와 글자간의 간격을 조정하는 속성


word-spacing

⇒ 단어와 단어 사이의 간격을 조정하는 속성


이들에 대한 값은 em단위를 채택해야 한다. 


다음은 코드 조각이다.


h1, h2 {

   text-transform: uppercase;

   letter-spacing: 0.2em;}


.author {

   font-weight: bold;

   word-spacing: 1em;}





CSS text-align에 대해


text-align

문장(글자)을 좌/우/가운데... 등으로 정렬되게 하는 속성


이 속성이 가질수 있는 값(value)

left : 문장을 좌로 정렬

right : 문장을 우로 정렬

center : 문장을 가운데로 정렬

justify : 해당 라인 좌우 전체를 꽉 채우도록 정렬


아래는 코드 조각이다.


h1 {

   text-align: left;}


p {

   text-align: justify;}


.author {

   text-align: right;}




안녕하세요, 코드 조각 블로그 운영자입니다.


블로그 이름을 '코드 조각(Code Piece)'로 정한 이유는 객체지향과의 연관성을 염두에 두었다고 거창하게(?) 말할 수 있을 것 같습니다^^.


객체(조각), 객체(조각)... 들을 조합해 가면서 하나의 완전한 S/W를 완성해 가는 것과 같은 맥락으로 작은 코드의 조각 조각들을 통해 기능과 개념들을 배워갈 때 비로소 큰 그림이 완성 될수 있겠다는 생각에서 입니다.

작은 조각 조각들이 쌓일 때 큰 그림이 그려지겠다는 뜻을 담았습니다.


완전한 소스가 갖는 장점이 있겠으나 긴 소스를 다 읽을 필요 없이 필요한 부분, 필요한 기능에 대한 소스만을 소개함으로 짧은 시간 안에 원하는 기능을 이해할 수 있는 장점이 코드 조각을 통해서 얻을 수 있겠기에 블로그 이름을 '코드 조각'으로 지어봤습니다.


아무튼 백발이 성성할 때 까지 코딩의 즐거움을 계속할 수 있기를 바라면서 소개를 마칩니다.




안드로이드 xml 문서에(예: strings.xml)에 공백을 넣기 위해서 HTML에서 사용하는

&nbsp;를 사용하면 컴파일 단계에서 에러가 발생한다.


&nbsp; ⇒ HTML에서 공백 넣은 이 기호는 에러


이때 공백을 포함한 특수 문자를 넣기 위해서는 아래의 방식으로 처리하면 된다. 


&#160;    ⇒     공백

&lt;          ⇒     <

&gt;         ⇒     >

\t             ⇒     탭

\n            ⇒     한 줄 띄우기

\'             ⇒     apostrophe(예: Tom\'s)


+ Recent posts