- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
CSS [CSS 기초] DIV 태그를 이용하여 프레임 나누기
2017.08.25 04:35
[CSS 기초] DIV 태그를 이용하여 프레임 나누기
[CSS 기초] DIV 태그를 이용하여 프레임 나누기
안녕하세요~ 친절한효자손 이에요.
CSS를 이용하여, 프레임을 나누는 실습을 하고 있는데요,
이거 생각보다 쉽지만은 않지만, 재.미.있.네.요! ㅎㅎㅎ
역시, 마음을 비우고, 하나하나 차근차근 배운다고 생각하고 진행하면 참으로 쉽고 재밌게 배우지 않겠느냐~
라는 것이 개인 견해에요~ ㅎ
이번에는, CSS기초중, DIV태그를 써서, 웹 안쪽에 프레임을 나누는 방법을 학습했는데요,
호오...확실한건, HTML TABLE 태그보다는! 쉽다는것~! (개인생각?)
한번 그럼 차근차근 진행해 보도록 할까요????
다시한번 말씀 드리자면,
HTML과는 다른특징 중 하나가, CSS 속성들은, 모두 <HEAD> 안쪽에 들어오고,
본문인 <BODY>에서 자유롭게 속성을 끌어 쓰면 되기에, CSS가 참으로 편리하지 않는가? 라는것이죠^^
지금 저기 보시면, #div_root 라고 보이시죠?
이게 가장 큰 틀을 잡은 것이구요, 가로 800픽셀 (세로는 자동할당) 로 그 크기를 주고,
이 상자 안에 총 4개의 영역을 넣을꺼에요.
1
2 3
4
이렇게 구별을 지을거구요, 2번은 세로폭이 3번보다는 좁게 들어갈 꺼에요.
너무 길게 쭉~ 적어놔서;;; 잘라서 스크린샷 했구요,
div_ 이후에, top, menu, con, botton 이라고 이름을 지어놨구요 (#이후부터는 마음대로 이름 지어도 되요^^)
그 속성값을 {} 안에 태그를 이용하여 각각 넣어놨어요.
또한, <BODY> 쪽을 보시면, <div> 이후에, id="#으로 이름정한것들" 를 해줌으로 인해서,
각 프레임 별 글씨가 들어가게끔 진행하게 했구요~!
지난시간에 배운, CLASS 할당해 주는 방법까지도 써봤어요^^;
그러면, 이렇게 적용이 되는 것이죠^^
<table> 태그를 쓰면, 각 행마다 속성 별도로 넣어야 하는 번거로움이 있었지만,
이렇게 div 로서 속성을 먼저 약속을 정해놓고,
<body> 에서 깔끔하게 그 값만 넣어주면~!?
알아서 웹상에 표시가 되니, 너무 완벽하고 깔끔하게 출력이 되는거죠^^
그러면, 한번 비슷하게 CSS 영역나누기 연습을 해보죠^^
프레임을 이번에는
1 2
3
이렇게 나눌껀데요, 1번에는 사진을, 2번에는 제목, 3번이 본문이에요.
신성우의 서시 가사를 넣을거에요.
그리고, 참고로, 2번프레임은 3층짜리 프레임 이고요, 3층에는 "서시" 라고 들어가있고, 2층은 비어있음! 1층에는 "신성우" 라고 텍스트가 들어있죠.
그러면, 1번은 위아래가 길고~ 2번안에 있는 3개의 박스는 가로가 길고 세로길이가 짧은 박스가 3개 쌓여있는 프레임 이겠죠?
이런식으로, CSS 태그를 구성해 보았어요. class 태그는 굳이 안주셔도 되요^^;
저는 그냥 이쁘게 꾸미고 싶어서요...하하하~!
이렇게 해서, 웹에서 보여지게 되면,
아래처럼 나오게 되는거죠^^
짜잔~! 글은 <pre>태그로 해서 주는게 가장 편리하죠^^
어떠셔용????
<table> 보다는 <div>가 좀 더 편리하게 쓰일수 있고,
활용도가 높은것을 확인하실 수 있을꺼에요~!
이곳, 티스토리에 CSS 가 적용되는지, 한번 테스트 해 봤는데,
그대로 적용 되더라구요^^
따라서, CSS를 조금만 익히더라도~ 얼마든지 스킨 및 글꼴 등, 여러 배치 등등
변경이 가능할 날이 얼마 남지 않았어요~!
자, 이렇게 div 에 대해 알아보았는데요~
저도 아직 많이 부족하지만, 열심히~! 또 열심히 배워서,
언젠간 블로그 스킨을 떡주무르듯 하는 날을 목표로! 꾸준히 포스팅을 하도록 할께요^^
우리 같이 잘 해보아요~!
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
