본문 바로가기

레이아웃9

2 레이아웃 //// ViewController.swift// layout2//// Created by MacBookPro on 2017. 11. 16..// Copyright © 2017년 MacBookPro. All rights reserved.// import UIKit class ViewController: UIViewController { // view 객체? 만들기 let view_1 = UIView() let view_2 = UIView() let view_3 = UIView() let view_4 = UIView() let view_5 = UIView() override func viewDidLoad() { super.viewDidLoad() //메인 view에 집어 넣기 view.addSubview(.. 2017. 11. 17.
11.웹페이지제작 - 완성 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816.. 2016. 11. 3.
10.웹페이지제작 - 컨텐츠 페이지 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116 만나 공지 만나 공지사항 메인 회사 상품 자료 공지 문의 만나홈페이지가 새롭게 개설되었습니다. 한국 최초의 전도형 주문QT책자 만나홈페이지가 새롭게 탄생했습니다. 앞으로 주보시안,캘린더,소식지,QT책자 등 다양한 문서자료를 업로드할 예정입니다. 자주 방문하셔서 퀄리티 높은 자료들 .. 2016. 11. 2.
7.레이아웃 - 박스 겹치기 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849샘플.boxA{boder:solid 8px green; background-color:gold; color:pink}.box1{ height: 200px; border:4px solid green; text-align: center; position:relative}.box2{ height: 100px; border:4px solid blue; position:absolute; top:150px;left:60px } BOX1 BOX2 Colored by Color Scriptercs - 박스 1과 2를 div태그로 감싸 그룹화 한다. 박스 A의 p.. 2016. 11. 2.
6.레이아웃 - 박스 정렬 순서 float 속성을 left 로하면 상자는 왼쪽에 right로 하면 오른쪽에 붙는다. 2016. 11. 2.
5.레이아웃 - 박스너비 고정하기 박스너비 고정하기 123456789.box2 {float: left; width: 300px ; height: 200px; border:4px dotted green; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; }Colored by Color Scriptercs 1. 박스2의 너비를 300px으로 준다. 1234567891011.box3 {float: none; width: auto; height: 200px; border:4px dotted blue; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; .. 2016. 11. 2.
3.레이아웃 - 박스너비 지정 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081샘플.boxA:after {content: ""; display: block; clear: both}.box1 { float: left; width: 33.3333% ; height: 200px; border:4px dotted green; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; } .bo.. 2016. 11. 2.
3.레이아웃 - 가로 정렬할 박스의 개수 변경 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253샘플.box1{border:4px solid green; line-height: 200px; float:left; width:32.5%}.box3{border:4px solid green; line-height: 200px;float:left; width:32.5%}.box2{border:4px solid green; line-height: 200px; float:left; width:32.5%}.box4{border:4px solid green; line-height: 200px;}.boxA:after{border:4px solid.. 2016. 11. 1.
1.레이아웃 - 박스정렬 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849샘플.box1{border:4px solid green; line-height: 200px;}.box2{border:4px solid green; line-height: 200px;}.box3{border:4px solid green; line-height: 200px;}.box4{border:4px solid green; line-height: 200px;}.boxA{border:4px solid RED; line-height: 200px;} BOX1 BOX2 BOX3 BOX4 Colored by Color Scriptercs 두번째와 세번째 박.. 2016. 11. 1.