CSS와 부트스트랩으로 이미지 위에 글자넣기 연습

아래와 같이 포토샵 등 그래픽 프로그램이 아닌 CSS로 사진 위에 글자가 나오게 하는 것이다. position의 relative와 absolute를 이용한다는 것을 알았다. 예전부터 어떻게 하는지 알고 싶었으나 꼭 알아야겠다는 생각은 없었다. 그런데 스킨을 수정하다 보니 알아야겠다는 생각이 들었다. 미리보기는 아래와 같으며 소스는 사진 아래에서 간단히 설명하려 한다. 아래와 같은 것을 스킨을 만드는 사람에게 유용할 것이다. 참고로 네이버 블로그에서 못하니 하려고 하면 헛고생이니 하려고 하지 말았으면 한다. 혹시 네이버 블로그에서 사진 위에 글자가 있으면 100% CSS로 한 것이 아닌 포토샵과 같은 그래픽 프로그램을 사용해야 할 것이다. 

출처 : https://pixabay.com/

HTML

아래 소스를 보면 알 수 있듯이 이미지와 글자가 포함된 영역을 하나의 div로 묶어 지정해준다. 두 번째는 글자가 포함된 영역을 또 하나의 div로 묶어 준다는 것을 알 수 있었다. 

<div class="image">

  <img src="이미지 주소">

  

   <div class="text">

        <p>텍스트</p>

    </div>

</div>

CSS

아래 CSS를 보면 알겠지만 먼저 position으로 이미지는 relative를 해주고 글자(제목,날짜 등)는 position을 absolute를 지정해 준다는 것이었다. CSS에서 Postion을 정확히 이해해야 하는데 부족하고 나도 제대로 설명할 수 없으니 relative와 absolute에 대해서는 검색을 통해서 자세히 알았으면 한다.  

.image {

    position:relative;

}

.image .text {

    position:absolute;

    top:10px;

    left:10px;

    color:#FFF;

}

많이 부족하지만 이미지는 relative,글자는 absolute를 적용하면 아래와 같이 된다. http://web.enavu.com/tutorials/making-image-overlay-caption-using-css/에서 활용한 것도 볼 수 있다. 거기에서는 내용에 배경을 주었다. 이것에 대해 이해해야 하는데 암기하게 된다. 

너의 속에 그들에게 되려니와, 자신과 운다. 같이, 품고 이상의 고동을 가치를 따뜻한 같으며, 소담스러운 칼이다. 눈에 청춘의 너의 할지니, 그와 청춘의 것이다. 구할 방황하였으며, 인간의 청춘 투명하되 인생을 방황하여도, 위하여 사막이다.

출처 : https://pixabay.com/

포토샵 등의 그래픽 프로그램으로 글자를 쓰는 것이라면 설명을 하지 않았을 것이다. CSS로 하는 것이니 설명한 것이다. 

그런데 부트스트랩(bootstrap)에서 이미지 위에 글자를 중앙에 위치 시키는 것은 간단하다. 그 소스는 http://codepen.io/drawby/pen/NPoEvZ에서 봤는데 이미지를 부트스트랩 그리드인 col-md-10으로 감싸고 이미지를 반응형으로 만들어주는 img-responsive를 후 carousel-caption를 추가해주면 됐다. 나는 아래 더보기 안의 그림과 같이 했다. 부트스트랩이니 이미지를 부트스트랩 그리드인 col-md-*,col-sm-*등으로 감싸야 한다. CSS 포지션 속성인 relative,absolute를 알 필요 없었다.

재미있는 사진

이 블로그에서 부트스트랩을 사용하면서 여러 유용함을 느끼지만 한편으로는 웬만한 것을 간단하게 처리해주니 편한 것도 있지만 뭔가 모르고 지나간다는 느낌이 들어 짜증날 때가 있다. 그러니 제대로 코딩을 하려고 하는 분은 부트스트랩을 사용하지 않았으면 한다. 다른 사람은 모르겠지만 내가 보는 부트스트랩의 최대 단점이 쉬운 것이 아닌가 한다. 부트스트랩을 사용하니 쉬운 것만 찾는 것 같다. 

동영상, 사진 편집 패키지 디렉터 스위트 | CyberLink