CentOS7 + httpd 2.4.18 + php 7.0.3 + mariaDB 10.1.11 소스설치

＠ apache /usr/local/apache/
＠ mariadb /usr/local/mariadb/
＠ php /usr/local/php/
＠ apache-log /logs/
＠ db 파일 저장 위치 /usr/local/mariadb/data

＠ 패키지 제거 및 설치
# rpm -qa httpd php mysql
# yum remove -y httpd php mysql
# yum -y install ORBit2 a2ps acpid alsa-lib aspell at atk audiofile audit-libs-python autoconf* autofs automake* avahi avahi-glib bc bind bind-chroot bind-libs bind-utils cairo ccid compat-libstdc++-33 conman cpp crash createrepo crypto-utils cryptsetup-luks cups-libs cvs cyrus-sasl-md5 cyrus-sasl-plain dbus-python device-mapper-multipath dhcp dhcp-devel dialog dmraid dos2unix dosfstools dump e2fsprogs-devel ed eject elfutils elfutils-libs enscript expat-devel expect expect-devel expectk fetchmail file finger flex fontconfig fontconfig-devel foomatic ftp gcc gcc-c++ gdb gdbm-devel gettext gfs2-utils glib2-devel glibc-devel glibc-headers gmp-devel gnutls gpm gtk2 hdparm hesiod hicolor-icon-theme imake iptraf iptstate ipvsadm irqbalance kernel-devel kernel-headers keyutils-libs-devel kpartx krb5-devel krb5-workstation ksh lftp libICE libSM libX11 libX11-devel libXau libXau-devel libXcursor libXdmcp libXdmcp-devel libXext libXfixes libXft libXi libXinerama libXpm libXpm-devel libXrandr libXrender libXt libXxf86vm libaio libaio-devel libart_lgpl libbonobo libcurl-devel libdaemon libevent libfontenc libgomp libhugetlbfs libhugetlbfs-devel libidn-devel libmng libnl libnl-devel libpcap libselinux-devel libselinux-python libsepol-devel libsmi libstdc++-devel libsysfs libtiff libtool libtool-ltdl libwvstreams libxml2-devel libxml2-python libxslt libxslt-python lksctp-tools logwatch lrzsz lsof m2crypto mailcap mailx make nasm man man-pages man-pages-ko mc mcstrans mdadm memtest86+ mesa-libGL mesa-libGL-devel mgetty microcode_ctl mkbootdisk mlocate mrtg mt-st mtools mtr mutt nc ncurses-devel net-snmp-libs netpbm nfs-utils nmap nscd ntp ntsysv numactl oddjob openssh-clients openssl-devel pam-devel pam_krb5 pam_pkcs11 pango parted parted-devel patch pax pciutils pcsc-lite perl perl-Archive-Tar perl-Compress-Zlib perl-DBI perl-Digest-HMAC perl-Digest-SHA1 perl-HTML-Parser perl-HTML-Tagset perl-IO-Socket-INET6 perl-IO-Socket-SSL perl-IO-Zlib perl-Net-SSLeay perl-Newt perl-Socket6 perl-String-CRC32 perl-URI perl-libwww-perl pkgconfig pm-utils postgresql-libs prelink procmail psacct psutils pulseaudio-esound-compat pyOpenSSL pykickstart pyorbit pyparted python-pyblock quota rdate rdist rmt rpcbind rpm-build rsh rsync rusers rwho samba samba-client samba-common sendmail sendmail-cf setools setserial setuptool shared-mime-info sip sos spamassassin squashfs-tools strace stunnel symlinks sysfsutils syslinux sysstat system-config-date system-config-firewall talk tcl tcp_wrappers tcpdump tcsh telnet telnet-server time tk tmpwatch traceroute tree ttmkfdir unix2dos unixODBC unzip usbutils usermode vim-common vim-enhanced vsftpd wget words xinetd xorg-x11-proto-devel yp-tools ypbind ypserv zip zlib-devel GConf2 ImageMagick ImageMagick-perl avahi-libs bwidget crda cryptsetup-luks-libs cups deltarpm desktop-file-utils device-mapper-multipath-libs dmidecode dmraid-events docbook-dtds flac foomatic-db foomatic-db-filesystem foomatic-db-ppds ghostscript ghostscript-fonts gnome-doc-utils-stylesheets gnome-python2 gnome-python2-canvas gnome-user-docs gnome-vfs2 gpm-libs groff-perl gstreamer gstreamer-tools html2ps hunspell iw jasper-libs kpathsea libIDL libX11-common libXcomposite libXdamage libXdamage-devel libXext-devel libXfixes-devel libXfont libXres libXtst libXxf86vm-devel libasyncns libcanberra libcanberra-gtk2 libcom_err-devel libcroco libdrm-devel libedit libglade2 libgnomecanvas libgsf libnetfilter_conntrack libnfnetlink libnotify libogg libpaper librsvg2 libsamplerate libsndfile libtalloc libtasn1 libtdb libthai libtirpc libusb1 libvorbis libwmf-lite libxcb libxcb-devel lm_sensors-libs mesa-dri-drivers mozilla-filesystem mpfr netpbm-progs ntpdate openjpeg-libs pcsc-lite-libs perl-Compress-Raw-Zlib perl-Crypt-OpenSSL-Bignum perl-Crypt-OpenSSL-RSA perl-Crypt-OpenSSL-Random perl-Date-Manip perl-Digest-SHA perl-Encode-Detect perl-ExtUtils-MakeMaker perl-ExtUtils-ParseXS perl-IO-Compress-Base perl-IO-Compress-Zlib perl-Mail-DKIM perl-MailTools perl-Module-Pluggable perl-Net-DNS perl-Net-LibIDN perl-NetAddr-IP perl-Package-Constants perl-Pod-Escapes perl-Pod-Simple perl-SNMP_Session perl-Test-Harness perl-Time-HiRes perl-TimeDate perl-YAML-Syck perl-devel perl-libs perl-version pixman poppler poppler-data poppler-utils portreserve psutils-perl pulseaudio pulseaudio-libs pycairo pygobject2 pygtk2 pygtk2-libglade python-decorator python-deltarpm python-slip python-slip-dbus rarian rarian-compat rtkit samba-winbind-clients setools-console setools-gui setools-libs setools-libs-tcl sgml-common sgpio sound-theme-freedesktop speex startup-notification system-config-date-docs system-config-firewall-tui tex-preview texinfo texinfo-tex texlive texlive-dvips texlive-latex texlive-texmf-dvips texlive-texmf-fonts texlive-texmf-latex tokyocabinet urlview urw-fonts usermode-gtk xcb-util xml-common xorg-x11-font-utils xulrunner xz xz-lzma-compat yelp lksctp-tools-devel libtool-ltdl-devel gmp gdbm zlib curl openssl bzip2-devel bison system-config-securitylevel readline-devel cmake lynx php-snmp gd-devel glibc-* net-tools nano

@ 방화벽 설정

방화벽 정지
# systemctl mask firewalld
# systemctl stop firewalld

iptables 기본으로 사용할수 있게 설정
# systemctl enable iptables

iptables 서비스 시작
# systemctl start iptables

정상작동 확인
# iptables -nL
＠ 기타 모듈 설치
# cd /usr/local/src
# mkdir etc
# cd etc
# wget http://download.savannah.gnu.org/releases/freetype/freetype-2.6.2.tar.gz
# wget https://bitbucket.org/libgd/gd-libgd/downloads/libgd-2.1.1.tar.gz
# wget http://ijg.org/files/jpegsrc.v9b.tar.gz
# wget http://sourceforge.net/projects/libpng/files/libpng16/1.6.21/libpng-1.6.21.tar.gz
# wget ftp://ftp.cac.washington.edu/imap/imap-2007f.tar.gz
# wget ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/pcre-8.38.tar.gz
# wget http://heanet.dl.sourceforge.net/mcrypt/libmcrypt-2.5.8.tar.gz
# wget http://ftp.gnu.org/pub/gnu/libiconv/libiconv-1.14.tar.gz

# tar zxvf freetype-2.6.2.tar.gz; tar zxvf libgd-2.1.1.tar.gz; tar zxvf jpegsrc.v9b.tar.gz; tar zxvf libpng-1.6.21.tar.gz; tar zxvf imap-2007f.tar.gz; tar zxvf pcre-8.38.tar.gz; tar zxvf libmcrypt-2.5.8.tar.gz; tar zxvf libiconv-1.14.tar.gz
# cd /usr/local/src/etc/jpeg-9b;./configure –prefix=/usr/local/jpeg –enable-shared –enable-static;make clean;make -j4; make install;
# cd /usr/local/src/etc/libpng-1.6.21
# cp scripts/makefile.linux Makefile
# make clean;make -j4;make install
# cd /usr/local/src/etc/freetype-2.6.2
# make clean;./configure –prefix=/usr/local/freetype;make -j4;make install
# cd /usr/local/src/etc/libgd-2.1.1
# make clean;./configure –prefix=/usr/local/gd;make -j4;make install
# cd /usr/local/src/etc/imap-2007f

Makefile을 오픈하여 EXTRACFLAGS= 를 EXTRACFLAGS=-fPIC 로 수정 합니다.

# make clean;make lr5
# mkdir /usr/local/imap
# mkdir /usr/local/imap/include
# mkdir /usr/local/imap/lib
# cp c-client/*.h /usr/local/imap/include/
# cp c-client/*.c /usr/local/imap/lib/
# cp c-client/c-client.a /usr/local/imap/lib/libc-client.a
# cp imapd/imapd /usr/sbin/
# vi /etc/xinetd.d/imapd

service imap
{
disable = no
socket_type = stream
wait = no
user = root
server = /usr/sbin/imapd
log_on_success += HOST DURATION
log_on_failure += HOST
}

# service xinetd restart
# cd /usr/local/src/etc/pcre-8.38
# make clean;./configure –prefix=/usr/local –enable-unicode-properties=yes;make -j4;make install
# cd /usr/local/src/etc/libmcrypt-2.5.8
# make clean;./configure –prefix=/usr/local;make -j4;make install
# cd /usr/local/src/etc/libiconv-1.14

/usr/local/src/etc/libiconv-1.14/srclib/stdio.in.h 파일 698줄을 다음과 같이

+#if defined(__GLIBC__) && !defined(__UCLIBC__) && !__GLIBC_PREREQ(2, 16)
_GL_WARN_ON_USE (gets, “gets is a security hole – use fgets instead”);
+#endif
#endif

+된 부분을 추가하여 수정한 후

# make clean;./configure –prefix=/usr/local;make -j4;
# make install
# ln -s /usr/local/lib/libiconv.so.2 /usr/lib/libiconv.so.2

vi /etc/sysconfig/selinux 를 열어
SELINUX=enforcing 를 SELINUX=disabled 로 바꿔주고 서버 재부팅 한다.

reboot

＠ 아파치 설치전 apr 설치
# cd /usr/local/src
# wget http://archive.apache.org/dist/apr/apr-1.5.2.tar.gz
# wget http://archive.apache.org/dist/apr/apr-util-1.5.4.tar.gz
# tar zxvf apr-1.5.2.tar.gz
# cd /usr/local/src/apr-1.5.2
# ./configure –prefix=/usr/local/apr
# make;make install

# cd /usr/local/src
# tar zxvf apr-util-1.5.4.tar.gz
# cd /usr/local/src/apr-util-1.5.4
# ./configure –prefix=/usr/local/apr-util –with-apr=/usr/local/apr
# make;make install
*** httpd 2.4.18 설치 ***

# cd /usr/local/src
# wget http://apache.arvixe.com/httpd/httpd-2.4.18.tar.gz
# tar zxvf httpd-2.4.18.tar.gz

prefork 설정시
# vi /usr/local/src/httpd-2.4.18/server/mpm/prefork/prefork.c (73번 라인)
DEFAULT_SERVER_LIMIT의 상수값을 1024로 수정.
worker 설정시
# vi /usr/local/src/httpd-2.4.18/server/mpm/worker/worker.c (84번 라인)
DEFAULT_SERVER_LIMIT의 상수값을 64로 수정.
event 설정시
# vi /usr/local/src/httpd-2.4.18/server/mpm/event/event.c
DEFAULT_SERVER_LIMIT의 상수값을 32로 수정.

# cd httpd-2.4.18
./configure \
–prefix=/usr/local/apache \
–with-apr=/usr/local/apr \
–with-apr-util=/usr/local/apr-util \
–with-z \
–with-pcre \
–enable-mods-static=’vhost_alias log_config logio mime mime_magic alias headers status http negotiation’ \
–enable-mods-shared=’file_cache disk_cache deflate expires usertrack unique_id actions userdir autoindex cgi cache mem_cache distcache auth_digest rewrite remoteip’ \
–enable-rewrite \
–enable-deflate \
–enable-expires \
–enable-headers \
–enable-cache \
–enable-ssl \
–disable-imagemap \
–disable-include \
–disable-charset-lite \
–disable-reqtimeout \
–disable-cgid \
–disable-asis \
–enable-so \
–enable-authn-socache=no \
–enable-socache-shmcb \
–enable-socache-dbm=no \
–enable-ldap=no \
–enable-authnz-ldap=no \
–enable-cgid=no \
–enable-dav=no \
–enable-dav-fs=no \
–enable-isapi=no \
–enable-ext-filter=no \
–enable-authnz-ldap=no \
–enable-lbmethod-byrequests=no \
–enable-lbmethod-bytraffic=no \
–enable-lbmethod-bybusyness=no \
–enable-lbmethod-heartbeat=no \
–enable-dav-lock=no \
–enable-mpms-shared=all
이 컴파일 옵션은 다음과 같은 특징을 같습니다.

## LDAP 를 사용할 수 없다.
## Proxy를 사용할 수 없다.
## DSO 로 컴파일 되었다.
## MPM 을 Loadable MPM으로 컴파일 되었다. 이는 Run-time 에서 MPM 모델을 바꿀 수 있다는 뜻.

# make;make install

httpd의 기본적으로 사용할 계정을 생성해 줍니다.
# /usr/sbin/useradd -c “Apache” -u 48 -s /sbin/nologin -r -d /usr/local/apache/htdocs apache

그리고 나서 httpd.conf 파일을 다음과 같이 수정해 줍니다.
vim /usr/local/apache/conf/httpd.conf

User apache
Group apache

‘Loadable MPM'(–enable-mpms-shared=all) 으로 컴파일 되었기 때문에 자신이 사용할 MPM 모듈을 활성화 해줍니다.
LoadModule mpm_event_module modules/mod_mpm_event.so # event MPM
#LoadModule mpm_prefork_module modules/mod_mpm_prefork.so # prefork
#LoadModule mpm_worker_module modules/mod_mpm_worker.so # worker
그리고 ServerName 을 자신의 서버 환경에 맞게 적어줍니다.

ServerName localhost:80
서버관리자 메일주소 설정
ServerAdmin webmaster@localhost

웹 페이지 접속시 기본적으로 읽어 들일 파일명 설정
DirectoryIndex index.html 를 찾아 DirectoryIndex index.html index.htm index.php index.php3 index.cgi index.jsp 로 수정

아래와 같이 추가 합니다.
AddType application/x-compress .Z
AddType application/x-gzip .gz .tgz
AddType application/x-httpd-php .htm .html .php .ph php3 .php4 .phtml .inc –>추가
AddType application/x-httpd-php-source .phps –>추가

@주석제거
# AddHandler cgi-script .cgi

몇가지 주석 및 제거 – 필요에 따라 더 적용해도 무방함
LoadModule userdir_module modules/mod_userdir.so <– 주석제거
LoadModule slotmem_shm_module modules/mod_slotmem_shm.so <– 주석제거
Include conf/extra/httpd-mpm.conf <– 주석제거
Include conf/extra/httpd-userdir.conf <– 주석제거
Include conf/extra/httpd-vhosts.conf <– 주석제거
Include conf/extra/httpd-default.conf <– 주석제거

인터넷주소 rewrite 모드 사용을 위한 설정
AllowOverride All <– 수정
Require all denied

# vi /usr/local/apache/conf/extra/httpd-userdir.conf
Options MultiViews Indexes SymLinksIfOwnerMatch IncludesNoExec 를
Options MultiViews SymLinksIfOwnerMatch IncludesNoExec 로
Indexes 를 삭제 한다.

＠ 접속이 안될경우 80포트 열어 주어야 한다.

vi /etc/sysconfig/iptables
-A INPUT -m state –state NEW -m tcp -p tcp –dport 80 -j ACCEPT =>추가
/etc/init.d/iptables restart 또는 service iptables restart 또는 systemctl restart iptables.service

cp /usr/local/apache/bin/apachectl /etc/init.d/httpd
＠ chkconfig를 이용해서 자동실행 등록해야 하지만 이전에 실행 스크립트 파일에 아래 내용 추가가 선행되어야 한다.
# vi /etc/init.d/httpd
-httpd 파일
# chkconfig: 2345 90 90
# description: init file for Apache server daemon
# processname: /usr/local/apache/bin/apachectl
# config: /usr/local/apache/conf/httpd.conf
# pidfile: /usr/local/apache/logs/httpd.pid
이를 추가한다.

# vi /usr/local/apache/conf/extra/httpd-vhosts.conf

열어서 아래 계정루트를 추가 한다
<VirtualHost *:80>
DocumentRoot /usr/local/apache/htdocs/
</VirtualHost>

# chkconfig –add httpd
# chkconfig –list | grep httpd
# /etc/init.d/httpd start

*** mariaDB 다운로드 및 설치 ***

# cd /usr/local/src
# wget http://mirrors.accretive-networks.net/mariadb//mariadb-10.1.11/source/mariadb-10.1.11.tar.gz
# tar zxvf mariadb-10.1.11.tar.gz
# cd mariadb-10.1.11
# ln -s /usr/local/lib/libpcre.so.1 /lib64 또는 ln -s /usr/local/lib/libpcre.so.1 /lib

# cmake \
-DCMAKE_INSTALL_PREFIX=/usr/local/mariadb \
-DWITH_INNOBASE_STORAGE_ENGINE=1 \
-DWITH_ARCHIVE_STORAGE_ENGINE=1 \
-DWITH_BLACKHOLE_STORAGE_ENGINE=1 \
-DMYSQL_DATADIR=/usr/local/mariadb/data \
-DWITH_PERFSCHEMA_STORAGE_ENGINE=1 \
-DWITH_PARTITION_STORAGE_ENGINE=1 \
-DWITH_FEDERATEDX_STORAGE_ENGINE=1 \
-DWITH_ARIA_STORAGE_ENGINE=1 \
-DWITH_XTRADB_STORAGE_ENGINE=1 \
-DDEFAULT_CHARSET=utf8 \
-DDEFAULT_COLLATION=utf8_general_ci \
-DENABLED_LOCAL_INFILE=1 \
-DWITH_EXTRA_CHARSETS=all \
-DWITH_READLINE=1 \
-DWITH_SSL=system \
-DWITH_ZLIB=system

# make;make install

* 사용자 등록
MariaDB 서버의 실행시킬 사용자를 생성한다.

# /usr/sbin/groupadd -g 27 -o -r mysql
# /usr/sbin/useradd -M -g mysql -o -r -d /usr/local/mariadb/data -s /bin/false -c “MariaDB Server” -u 27 mysql

※ 사용자를 mysql로 한것은 mariaDB는 MySQL과의 호환성으로 인하여 mysql로 하였습니다.

* 소유권 변경
# mkdir -p /usr/local/mariadb/InnoDB/redoLogs
# mkdir -p /usr/local/mariadb/InnoDB/undoLogs
# chown -R mysql /usr/local/mariadb/data
# chgrp -R mysql /usr/local/mariadb
# mkdir /usr/local/mariadb/logs /usr/local/mariadb/tmp
# chown mysql.mysql /usr/local/mariadb/tmp
# chown mysql.mysql /usr/local/mariadb/logs
# chown -R mysql:mysql /usr/local/mariadb/data

* 자동 실행 등록
# cp /usr/local/mariadb/support-files/mysql.server /etc/rc.d/init.d/mysqld

# chmod 755 /etc/rc.d/init.d/mysqld
# chkconfig –add mysqld
# chkconfig –list | grep mysqld
* 시스템 테이블 생성
# cd /usr/local/mariadb
# ./scripts/mysql_install_db –user=mysql –basedir=/usr/local/mariadb –datadir=/usr/local/mariadb/data
* 라이브러리를 추가
# echo “/usr/local/mariadb/lib” > /etc/ld.so.conf.d/mysql.conf
* 64bit 라면 라이브러리를 위해서 심볼릭 링크
# cd /usr/local/mariadb
# ln -s lib lib64
# cd /usr/local/mariadb/support-files
# cp my-huge.cnf /etc/my.cnf
# chmod 755 /etc/init.d/mysqld
# /etc/init.d/mysqld start

※ 다른버전과 다르게 “character-set-server” 가 아닌 “character_set_server” 처럼 아래쪽라인 (_) 입니다.
이게 맞지 않을 경우 PID 에러라고 하면서 mysql이 실행되지 않을 수 있습니다.
* root 비밀번호 변경
# /usr/local/mariadb/bin/mysql -uroot -p
Enter password: (그냥 Enter 누르시면 됩니다.)

mysql> USE mysql;
mysql> UPDATE user SET password=password(‘xxxxxxxx’) WHERE user=’root’;
mysql> FLUSH privileges;
* 캐릭터셋 확인
mysql> show variables like ‘c%’;

+————————–+———————————-+
| Variable_name | Value |
+————————–+———————————-+
| character_set_client | utf8 |
| character_set_connection | utf8 |
| character_set_database | utf8 |
| character_set_filesystem | binary |
| character_set_results | utf8 |
| character_set_server | utf8 |
| character_set_system | utf8 |
| character_sets_dir | /usr/local/mysql/share/charsets/ |
| collation_connection | utf8_general_ci |
| collation_database | utf8_general_ci |
| collation_server | utf8_general_ci |
| completion_type | NO_CHAIN |
| concurrent_insert | AUTO |
| connect_timeout | 10 |
+————————–+———————————-+
14 rows in set (0.00 sec)

* 공용계정인 test 계정을 삭제하자

mysql> Show Databases;
+——————–+
| Database           |
+——————–+
| information_schema |
| mysql              |
| performance_schema |
| test               |
+——————–+
4 rows in set (0.00 sec)

mysql> drop Database test;
Query OK, 0 rows affected (0.01 sec)

mysql> Show Databases;
+——————–+
| Database           |
+——————–+
| information_schema |
| mysql              |
| performance_schema |
+——————–+
3 rows in set (0.00 sec)
설치 작업이 끝났다면 익명접근권한을 삭제하자. ( mysql 콘솔에 그냥 접근을 못하게 해야 함.)
# /usr/local/mariadb/bin/mysql -u root -p
# Enter password:
# mysql> USE mysql;
# mysql> delete from user where password = “”;
# mysql> exit
# /usr/local/mariadb/bin/mysqladmin -u root -p reload
# Enter password:
*** PHP 7.0.2 설치 및 설정 ***

# cd /usr/local/src
# wget http://php.net/distributions/php-7.0.3.tar.gz
# tar zxvf php-7.0.3.tar.gz
# cd php-7.0.3

# ./configure –prefix=/usr/local/php \
–enable-fpm \
–with-apxs2=/usr/local/apache/bin/apxs \
–with-libdir=lib \
–with-gettext \
–with-mhash \
–with-gmp \
–with-gd \
–with-jpeg-dir=/usr/local/jpeg \
–with-png-dir=/usr/local/lib \
–with-mcrypt=/usr/local/lib \
–with-iconv=/usr/local/lib \
–with-freetype-dir=/usr/local/freetype \
–with-config-file-path=/usr/local/lib \
–with-zlib \
–enable-gd-native-ttf \
–enable-bcmath \
–enable-exif \
–with-mcrypt \
–with-zlib \
–with-bz2 \
–enable-mbstring \
–enable-opcache \
–with-curl \
–with-imap=/usr/local/imap \
–with-imap-ssl \
–with-mysql-sock=/tmp/mysql.sock \
–with-mysqli=/usr/local/mariadb/bin/mysql_config \
–with-openssl \
–with-pdo-mysql=/usr/local/mariadb \
–enable-pcntl \
–enable-mbregex \
–with-mhash \
–enable-zip \
–with-pcre-regex \
–with-libxml-dir=/usr \
–with-kerberos \
–disable-debug \
–enable-soap \
–with-gdbm \
–enable-ftp \
–enable-calendar \
–enable-shmop \
–enable-inline-optimization \
–enable-sigchild \
–enable-sockets \
–enable-maintainer-zts

# make; make install

* php.ini 파일을 다음과 같이 복사해 줍니다.

# cp php.ini-production /usr/local/lib/php.ini
추가작업은 아래와 같이

# vi /root/.bash_profile
PATH=$PATH:$HOME/bin 를
PATH=$PATH:$HOME/bin:/usr/local/mariadb/bin:/usr/local/apache/bin:/usr/local/php/bin 로 수정
source /root/.bash_profile
service httpd restart
＠ php.ini 설정
# vi /usr/local/lib/php.ini
post_max_size = 100M
upload_max_filesize = 100M
allow_url_fopen = Off
short_open_tag = On
disable_functions = system,exec,passthru,proc_open,popen,curl_exec,curl_multi_exec,parse_ini_file,show_source 또는
disable_functions = system, show_source, exec, shell_exec, curl_exec, parse_ini_file, curl_multi_exec, proc_open, passthru, set_time_limit, ini_restore, mysql_list_dbs, ini_alter, dl, pfsockopen, openlog, syslog, symlink, link, chgrp, leak, popen, escapeshellcmd, apache_child_terminate, apache_get_modules, apache_get_version, apache_getenv, apache_note, apache_setenv, virtual, mb_send_mail 또는

disable_functions = php_uname, putenv, getmyuid, getmypid, passthru, leak, listen, diskfreespace, tmpfile, link, ignore_user_abord, shell_exec, popen, dl, set_time_limit, exec, system, highlight_file, source, show_source, fpaththru, virtual, posix_ctermid, posix_getcwd, posix_getegid, posix_geteuid, posix_getgid, posix_getgrgid, posix_getgrnam, posix_getgroups, posix_getlogin, posix_getpgid, posix_getpgrp, posix_getpid, posix_getppid, posix_getpwnam, posix_getpwuid, posix_getrlimit, posix_getsid, posix_getuid, posix_isatty, posix_kill, posix_mkfifo, posix_setegid, posix_seteuid, posix_setgid, posix_setpgid, posix_setsid, posix_setuid, posix_times, posix_ttyname, posix_uname
자주 살펴보는 파일은 심볼릭 링크를 설정해서 /root/conf 파일에 모아두자
# mkdir /root/conf
# cd /root/conf
# ln -s /usr/local/lib/php.ini /root/conf/php.ini
# ln -s /usr/local/apache/conf/httpd.conf /root/conf/httpd.conf
# ln -s /usr/local/apache/conf/extra/httpd-vhosts.conf /root/conf/httpd-vhosts.conf
# ln -s /usr/local/apache/conf/extra/httpd-ssl.conf /root/conf/httpd-ssl.conf
# ln -s /etc/my.cnf /root/conf/my.cnf
# ln -s /etc/sysconfig/iptables /root/conf/iptables
＠ Zendopcache 설치

php 5.5.x 버전 이상에서는 opcache 가 기본 내장되어 있으므로 php 설치시에 –enable-opcache 를 설정해주고 설치한 후
vi /usr/local/lib/php.ini 파일의 [opcache] 하단에 아래와 같이 설정해주고 service httpd restart 하면 적용 된다.

zend_extension=/usr/local/php/lib/php/extensions/no-debug-zts-20151012/opcache.so
opcache.memory_consumption=128
opcache.interned_strings_buffer=8
opcache.max_accelerated_files=4000
opcache.revalidate_freq=60
opcache.fast_shutdown=1
opcache.enable_cli=1

이상 CentOS7 에 APM을 최신버전으로 만들어 보았습니다.

Samsung NP-QX411-W01US NoteBook Motherboard Repair

미리주문한 Samsung NP-QX411-W01US Motherboard 가 오늘 도착했다.

노트북수리에서 가장 힘드는 부분이 분해하는 과정인데 이제품은 스쿠류 몇개만 풀면 쉽게 이탈착이 가능하다…^^

아래 보는 그림에서와 같이 노트북을 뒤집어 전용 드라이버를 사용해서 나사를 풀어주면 커버가 쉽게 분리된다.

밑면의 커버를 벗겨내면 위의 이미지처럼 뼈대만 남는다…^^;; 이그림에서는 내장형 배터리와 ODD, 750GB 하드 드라이브는 미리 빼두었다.

배송온 박스를 뜯고 머더보드를 비교해보니 아래 그림처럼 뭔가 하나 부족하다…ㅜㅜ

뭐가 잘못온것은 아닌데 PC의 사양에 따라 머더보드도 틀리다.

NVIDIA GPU가 빠져 있는 제품이 왔다….흠~ 리턴하고 재주문 하려다 귀차니즘이 몰려와 그냥 사용 하기로 했다…..ㅠㅠ

위의 그림 같이 머더보드를 조림하고 분해 역순으로 케이블과 나사를 조여준다. 이때 분해전에 미리 동영상이나 사진을 찍어두면 작업시 편하다….ㅎㅎ

CPU에 Thermal Grease (열전달 구리스)를 적당히 발라주고 Cooler Fan과 Heatsink UMA을 조립합니다.

커버를 씌우고 나사를 분해의 역순으로 조이면 수리는 끝납니다…^^

새술은 새부대에 담으랬다고 이참에 윈도우도 새로 설치하고 업데이트도 진행 했는데……

업데이트가 200개가 넘게 진행이 되네요. 작업 끝나고도 1시간 가까이 붙잡혀 있었다는…..ㅠㅠ

암튼 이렇게해서 삼성 NP-QX411-W01US 제품의 Motherboard 수리가 완전히 끝났습니다.

이제품의 배터리가 불량이 많이 나와서 한국에서는 배터리 무상 교체를 진행 했다는데 이곳은 조용 하네요. 이넘도 배터리가 부풀어 올라서 새배터리를 주문해 두었네요.

부트스트랩 Typography(타이포그래피) 이해하기….3

이번 시간에는 부트스트랩 Typography(타이포그래피) 중에서 태그중에서 목록,인라인,변수출력,샘플출력,등에 대해서 알아보도록 하겠습니다.
우선 목록을 나타내는 태그에는 순서없는 목록, 순서가 있는 목록, 스타일이 없는 목록, 인라인 목록, 연관 설명이 있는목록, 수평으로 설명을 늘어논 목록 이 있습니다.
수평 설명 목록은 열 길이보다 너무 긴 용어를 text-overflow 로 줄일 것이며, 좁은 너비에서는 자동으로 개행되는 모양이 바뀌도록 되어 있습니다.

1. 순서가 명확치 않은 항목들의 목록입니다

예제 : http://boot.apachezone.com/boot_Typography_bs.php
<div class=”bs-example” data-example-id=”simple-ul”>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
</div>

2. 순서가 명확한 항목들의 목록입니다.

예제 : http://boot.apachezone.com/boot_Typography_bs2.php
<div class=”bs-example” data-example-id=”simple-ol”>
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>
</div>

3. 스타일이 없는 항목들의 목록입니다.
항목에서 list-style 과 좌측 마진을 제거하세요. (직접 자식만 ) 이것은 오직 바로 아래 항목들에게만 적용됩니다. 그래서 당신은 중첩된 목록에도 따로 클래스를 추가하여야 합니다.

예제 : http://boot.apachezone.com/boot_Typography_bs3.php
<div class=”bs-example” data-example-id=”unstyled-list”>
<ul class=”list-unstyled”>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
</div>

4. 인라인 항목들의 목록입니다. display: inline-block; 로 항목들을 한줄에 보여주고 약간의 패딩을 줍니다.

예제 : http://boot.apachezone.com/boot_Typography_bs4.php
<div class=”bs-example” data-example-id=”list-inline”>
<ul class=”list-inline”>
<li>Lorem ipsum</li>
<li>Phasellus iaculis</li>
<li>Nulla volutpat</li>
</ul>
</div>

5. 연관된 설명들의 목록입니다.

예제 : http://boot.apachezone.com/boot_Typography_bs5.php
<div class=”bs-example” data-example-id=”simple-dl”>
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</div>

6. 수평으로 설명을 늘어논 목록입니다.
<dl> 내 용어들과 설명들을 나란히 놓습니다. 기본 <dl> 처럼 쌓이는 것부터 시작이지만, 네비게이션 바가 펼쳐지는 때와 같은 타이밍에 다음과 같이 됩니다.

예제 : http://boot.apachezone.com/boot_Typography_bs6.php
<div class=”bs-example” data-example-id=”horizontal-dl”>
<dl class=”dl-horizontal”>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Felis euismod semper eget lacinia</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>
</div>

7. 인라인 <code>…</code> 태그를 사용하여 짧은 코드를 감싸세요.

예제 : http://boot.apachezone.com/boot_Typography_bs7.php
<div class=”bs-example” data-example-id=”inline-code”>
For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>

8. 키보드로 들어가는 사용자 입력을 나타내기 위해 <kbd> 를 사용하세요.

예제 : http://boot.apachezone.com/boot_Typography_bs8.php
<div class=”bs-example” data-example-id=”simple-kbd”>
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
</div>

9. 기본블럭 여러행의 코드를 위해 <pre> 를 사용하세요. 적절한 렌더링을 위해 어떤 꺽쇠 괄호는 부호화를 해야합니다. 선택적으로 .pre-scrollable 클래스를 추가할 수도 있습니다. 최대 높이를 350px 로 설정하고 y축 스크롤바를 제공합니다.

예제 : http://boot.apachezone.com/boot_Typography_bs9.php
<div class=”bs-example” data-example-id=”simple-pre”>
<pre>&lt;p&gt;Sample text here…&lt;/p&gt;</pre>
</div>

10. 변수들을 나타내기 위해서 <var> 태그를 사용하세요.

예제 : http://boot.apachezone.com/boot_Typography_bs10.php
<div class=”bs-example” data-example-id=”simple-var”>
<p><var>y</var> = <var>m</var><var>x</var> + <var>b</var></p>
</div>

11. 프로그램으로부터의 샘플 출력을 나타내기 위해서 <samp> 태그를 사용하세요.

예제 : http://boot.apachezone.com/boot_Typography_bs11.php
<div class=”bs-example” data-example-id=”simple-samp”>
<p><samp>This text is meant to be treated as sample output from a computer program.</samp></p>
</div>

이렇게해서 부트스트랩 Typography(타이포그래피)중 자주사용하는 태그에 대해서 알아 보았습니다.
보통은 디자인을 하시는분들이 많이 사용하는 태그들이며 단순히 말하자면 글자를 다루는 일이라고도 할 수 있습니다.
사실 저도 부트스트랩을 공부하면서 알게된 지식이며,
깊이있게 알지못하며 겉핧기식 공부라 서투른 강좌를 이해해 주시면 감사하겠습니다.
다음 시간에는 부트스트랩 사용에 있어서 테이블 및 클래스 사용에 대해서 살펴 보도록 하겠습니다.
감사합니다.
참고 사이트 : http://www.w3schools.com/bootstrap

부트스트랩 Typography(타이포그래피) 이해하기….2

이번 시간에는 부트스트랩 Typography(타이포그래피) 중에서 텍스트 요소에 대해서 알아 보도록 하겠습니다.

우선 표시될수있는 텍스트 요소에는 강조,삭제.취소,삽입,밑줄,작은글,두꺼운글,이탤릭,정렬,변형,등…. 여러가지 옵션을 가지고 있습니다.

대체 요소로는  <b> 와 <i> 가 있으며, <b> 는 추가적인 중요성의 없이 단어나 구를 강조한다는데 의미가 있고, <i> 는 거의 음성이나 기술적 용어 등에 쓰입니다. 그리고 HTML5 에서 <b> 와 <i> 는 마음대로 사용해도 됩니다.

그럼 예제를 통해서 텍스트요소에 관련된 태그를 사용하면 어떤 변화가 있는지 알아 보겠습니다.

1. 강조할 텍스트

예제 : http://boot.apachezone.com/boot_Typography_mark.php

당신은 <mark>강조할</mark> 텍스트에 mark 태그를 사용할 수 있습니다.

2. 삭제된 텍스트

예제 : http://boot.apachezone.com/boot_Typography_del.php

<del>이 텍스트줄은 삭제된 텍스트로 다뤄짐을 의미합니다.</del>

3. 취소선 텍스트

예제 : http://boot.apachezone.com/boot_Typography_s.php

<s>이 텍스트줄은 더 이상 정확하지 않다고 다뤄짐을 의미합니다.</s>

4. 삽입된 텍스트

예제 : http://boot.apachezone.com/boot_Typography_ins.php

<ins>이 텍스트줄은 문서에 추가분으로 다뤄짐을 의미합니다.</ins>

5. 밑줄친 텍스트

예제 : http://boot.apachezone.com/boot_Typography_u.php

<u>이 텍스트줄은 밑줄이 그어질 것입니다</u>

6. 작은 텍스트

예제 : http://boot.apachezone.com/boot_Typography_small.php

<small>이 텍스트는 작게 보이도록 되어 있습니다.</small>

7. 두껍운 텍스트

예제 : http://boot.apachezone.com/boot_Typography_strong.php

<strong>두꺼운 텍스트로 렌더링 됩니다</strong>

8. 이탤릭체 텍스트

예제 : http://boot.apachezone.com/boot_Typography_em.php

<em>이탤릭체로 렌더링 됩니다</em>

9. 정렬 클래스: 콤포넌트의 텍스트를 손쉽게 재정렬 할 수 있습니다.

예제 : http://boot.apachezone.com/boot_Typography_sort.php

<p class=”text-left”>좌측정렬된 텍스트.</p>

<p class=”text-center”>중앙정렬된 텍스트.</p>

<p class=”text-right”>우측정렬된 텍스트.</p>

<p class=”text-justify”>양쪽정렬된 텍스트.</p>

<p class=”text-nowrap”>그냥 텍스트.</p>

10. 변형 클래스 : 콤포넌트의 텍스트를 대소문자 클래스로 변형시킵니다. 아쉽지만 한글은 해당사항이 없습니다…ㅠㅠ

예제 : http://boot.apachezone.com/boot_Typography_Strain.php

<p class=”text-lowercase”>Lowercased text.</p>

<p class=”text-uppercase”>Uppercased text.</p>

<p class=”text-capitalize”>Capitalized text.</p>

11. 약어 :

<abbr> 는 약어나 두문자어를 마우스를 올렸을 때 원래 텍스트를 보여주기 위한 요소입니다.

title 속성이 있는 약어는 점으로된 밑줄을 가지고 있고 마우스를 올렸을때 물음표 커서가 보여지며, 원래 텍스트를 보여줍니다.

예제 : http://boot.apachezone.com/boot_Typography_abbr.php

ㄱ. 기본 약어

<abbr title=”attribute”>attr</abbr>

ㄴ. 두문자어 : 미세하게 작은(90%) 폰트크기를 가지려면 .initialism 을 추가하세요.

<abbr title=”HyperText Markup Language” class=”initialism”>HTML</abbr>

12. 주소(address) : 주소나 이메일 등의 연락처를 보여줍니다. <br> 로 개행합니다.

예제 : http://boot.apachezone.com/boot_Typography_address.php

<address>

<strong>Twitter, Inc.</strong><br>

795 Folsom Ave, Suite 600<br>

San Francisco, CA 94107<br>

<abbr title=”Phone”>P:</abbr> (123) 456-7890

</address>

<address>

<strong>Full Name</strong><br>

<a href=”mailto:#”>first.last@example.com</a>

</address>

13. 인용구 : 문서안에 다른 출처로부터 인용한 콘텐츠 블록을 위해 사용 할 수 있습니다.

예제 : http://boot.apachezone.com/boot_Typography_blockquote.php

ㄱ. 기본 인용구

<blockquote>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

</blockquote>

ㄴ. 출처표기

<blockquote>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

<footer>Someone famous in <cite title=”Source Title”>Source Title</cite></footer>

</blockquote>

ㄷ. 다른표시 : 클래스를 사용하여 블록을 설정 할 수 도 있습니다.

<blockquote class=”blockquote-reverse”>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

<footer>Someone famous in <cite title=”Source Title”>Source Title</cite></footer>

</blockquote>

타이포그래피의 여러가지 태그 기능에 대해서 알아 보았습니다. 도움이 되셨는지 모르겠네요…^^

다음시간에는 부트스트랩 Typography(타이포그래피) 중에서 태그중에서 목록,인라인,변수출력,샘플출력,등에 대해서 알아보도록 하겠습니다.

참고 사이트 : http://www.w3schools.com/bootstrap

부트스트랩 Typography(타이포그래피) 이해하기….1

Typography(타이포그래피)는 영어사전에 인쇄 또는 인쇄술, 활판인쇄술 로 정의 되어 있습니다.
웹에서는 제목,본문,문단,인라인 테스트 요소,등의 개념으로 스타일 형태로 사용되어 지기도 합니다.
부트 스트랩에서 사용되는 글로벌 font-size 기본값은 14px 이고, line-height 는 1.428 입니다

1. 모든 HTML 제목인, <h1> 부터 <h6> 까지 사용가능합니다. 텍스트를 인라인으로 표시화면서 스타일만 제목 스타일로 맞추기 위해 .h1 부터 .h6 클래스 또한 사용 가능합니다.
예제 :  http://boot.apachezone.com/boot_heading.php

2. 더불어 일반적인 <small> 태그나 .small 클래스를 사용하여 제목 안에 가벼운 부제 텍스트를 만들어 사용 할 수 있습니다.
예제 :  http://boot.apachezone.com/boot_heading_Secondary.php

3 .<body> 와 모든 단락에 적용됩니다.
추가로, <p> 단락은 행높이의 절반의 하단 마진을 가지며, 마진 기본값을 10px 로 정의 됩니다.
예제 :  http://boot.apachezone.com/boot_heading_p.php

4. .lead 를 사용하여 문단의 문장을 눈에 띄도록 만들수도 있습니다.
예제 :  http://boot.apachezone.com/boot_heading_plead.php
5. Less 로 만들어진문자크기는 variables.less 에서의 두 LESS 변수(@font-size-base 와 @line-height-base) 에 기반됩니다.
첫번째 변수는 기본 폰트 크기이고 두번째 변수는 기본 행 높이입니다. 타이포그래피에서 마진, 패딩, 행 높이를 구하기 위해 두 변수와 몇 개의 간단한 수학을 사용하여 만들수 있습니다.
다음시간에는 부트스트랩 타이포그래피에서 사용되는 인라인 텍스트, 정렬클래스, 변형클래스, 인용구 등에 대해 알아 보도록 하겠습니다.

참고 사이트 : http://www.w3schools.com/bootstrap

부트스트랩 Grid 이해하기….3

원래 이번엔 Typography(타이포 그라피)에 대해서 살펴 보려고 하였으나

그리드 시스템 이해를 숙지하고 뒤돌아서면 잊어버리니 사용법에 대해서 먼저 알아 보려고 합니다……ㅠㅠ

예제를 보여드리기 위해 급하게 계정을 하나 만들었네요….ㅎㅎ

지난시간 설명으로 인해 클래스 옵션에 대해서 웬만큼 아실테니 바로 사용 예제를 통하여 알아 보도록 하겠습니다.

아래 예제의 경우는 .col-sm-* 를 표현한 것 입니다.

아래의 예를 들어 .col-sm-4은 가로 해상도 768px 이상에서 행의 4/12를 가로 크기로 하겠다는 뜻입니다.

만약 가로 해상도가 768px 미만이라면 행 전체를 가로 크기로 합니다.

예제 링크는 http://boot.apachezone.com/col-sm-4.php

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
<script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>
</head>
<body>

<div class=”container-fluid”>
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class=”row”>
<div class=”col-sm-4″ style=”background-color:lavender;”>.col-sm-4</div>
<div class=”col-sm-4″ style=”background-color:lavenderblush;”>.col-sm-4</div>
<div class=”col-sm-4″ style=”background-color:lavender;”>.col-sm-4</div>
</div>
</div>

아래의 예는 col-sm-4와 col-sm-8 를 혼용해서 사용한 예입니다.

col-sm-8는 가로 해상도 768px 이상에서 행의 8/12와 4/12를 각각 가로 크기로 하겠다는 뜻입니다

예제 링크는 http://boot.apachezone.com/col-sm-4_8.php

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
<script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>
</head>
<body>

<div class=”container-fluid”>
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class=”row”>
<div class=”col-sm-4″ style=”background-color:lavender;”>.col-sm-4</div>
<div class=”col-sm-8″ style=”background-color:lavenderblush;”>.col-sm-8</div>
</div>
</div>

</body>
</html>

위의 예제를 본것과 같이 .col-md-*, .col-lg-* 또한 해상도에 따라 차등 적용 하시면 됩니다.

.col-md-*은 가로 해상도 992px 이상에서 적용되며, .col-lg-*은 가로 해상도 1200px 이상에서 적용됩니다.

예를 들면 .col-md-6은 가로 해상도 992px 이상에서 행의 6/12을 가로 크기로 하겠다는 뜻입니다.

만약 가로 해상도가 992px 미만이라면 행 전체를 가로 크기로 하고,

.col-lg-6은 가로 해상도 1200px 이상에서 행의 6/12을 가로 크기로 하겠다는 뜻이고 가로 해상도가 1200px 미만이라면 행 전체를 가로 크기로 합니다.

아래 링크는 그리드 시스템의 클래스 옵션을 한눈에 살펴보기 위하여 만들어 보았습니다. 레이아웃의 해상도를 줄이거나 늘리면 변화를 확인 하실 수 있습니다.

http://boot.apachezone.com/grid-all.php

http://boot.apachezone.com/col-lg-4_col-sm-6.php

이제 그리드 시스템에 대해서 이해가 되셨는지 모르겠습니다….^^

다음 시간에는 정말 Typography(타이포 그라피)에 대해서 알아 보겠습니다.

참고 사이트 : http://www.w3schools.com/bootstrap

부트스트랩 Grid 이해하기….2

앞서 말씀드린 xs,sm.md,lg 와 같은 클래스 옵션은

적절한 정렬과 패딩을 위해서 fixed-width(.container)와 full-width(.container-fluid) 안에 행이 위치 해야 하며,

.container = 고정 폭 그리드 레이아웃,.container-fluid = 유동 폭 그리드 레이아웃 을 사용 합니다.
.col-xs- 는 주로 너비가 크지 않는 모바일폰에 적용되며,최대너비는 정의되지 않은 auto로 설정되어 있고 최대 컬럼너비 또한 auto 입니다.
.col-sm- 는 테블릿 에 적용되며 최대너비는 750px 이며, 최대 컬럼 너비는 60px 입니다.
.col-md- 는 주로 중간기기(데스크탑)에 사용되며 최대너비는 970px이며, 최대 컬럼 너비는 78px 입니다.
.col-lg- 는 큰 기기 (화면이 큰 데스크탑)에 사용되며 최대너비는 1170px 이며, 최대 컬럼 너비는 95px 입니다.

그리드 클래스는 여러장치에 따라 포괄적으로 제공되며, .col-lg-는 넓은 화면에 사용되는 레이아웃에 적용하고 되도록이면  .col-md-*를 이용해서 평균적인 데스크탑의 레이아웃에 맞추어 사용하는것이 바람직 합니다.

그럼 예제 사이트를 통해서 고정 폭 그리드 레이아웃 과 유동 폭 그리드 레이아웃이 어떻게 틀린지 알아 보도록 하겠습니다.

아래 링크는 고정 폭 그리드를 이용한 레이아웃 예제 입니다.
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_gs_container&stacked=h

아래 링크는 유동 폭 그리드를 이용한 레이아웃 예제 입니다.
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_gs_container-fluid&stacked=h

위의 두링크를 비교하시면 클래스에 따라 최대너비 크기에 다르게 반응 하는것을 확인 할 수 있을겁니다.

.container 는 min-width:992px 이하에서 .container-fluid 는 min-width:1200px 이하에서 각기 달리 반응 합니다.

또한, 그리드 시스템에서는 주요 분기점을 만들기 위해 아래와 같은 미디어 쿼리를 사용 하며, max-width 를 포함하여 사용 하기도 합니다.
미디어 쿼리 사용의 예 :

/* 매우 작은 기기들 (모바일폰, 768px 보다 작은) */
/* 부트스트랩에서 이것은 기본이므로 미디어쿼리가 없습니다. */

/* 작은 기기들 (태블릿, 768px 이상) */
@media (min-width: @screen-sm-min) { … }

/* 중간 기기들 (데스크탑, 992px 이상) */
@media (min-width: @screen-md-min) { … }

/* 큰 기기들 (큰 데스크탑, 1200px 이상) */
@media (min-width: @screen-lg-min) { … }

max-width를 포함하여 사용한 예 :

@media (max-width: @screen-xs-max) { … }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { … }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { … }
@media (min-width: @screen-lg-min) { … }

다음 시간에는 Typography(타이포 그라피)에 대해서 살펴 보겠습니다.​

참고 사이트 : http://www.w3schools.com/bootstrap

부트스트랩 Grid 이해하기….1

부트스트랩 빌더 작업하면서 제일 먼저 알아야 할 것이 Grid 시스템 이라는 넘인데…..

쉽게 이야기하면 레이아웃을 격자 형태로 짤라서 틀을 잡아주는 역활을 하는 시스템입니다.

그래서 반응형을 12컬럼 그리드 기반으로 만들어 졌다고 흔히들 말 합니다.

그리드 시스템만 잘 활용하면 레이아웃이 손폰이던,타블렛이던,PC에서든 알아서 최적 사이즈에 맞추어 반응을 합니다.

그리드 시스템 12컬럼에 대해서는 아래 이미지를 참조 하세요.

다음으로는 그리드 클래스에 대해 알아보겠습니다.

그리드 클래스에는 아래와 같은 너비사이즈를 결정하는 4가지가 있습니다.

xs (모바일에서 작동)
sm (타블렛에서 작동)
md (일반 모니터의 테스크 탑에서 작동)
lg (모니터가 큰 데스크탑에서 작동)
위에 설명한 너비 그리드 시스템에 각기 다른 컬럼을 포함 시킬수도 있고
.row를 추가하고 현재의 .span* 의 범위에 맞게 새로운 .span* 세트를 추가 할 수 있습니다.

반응형에는 고정비와 유동비 두가지 비율을 사용하는데
그중 유동비(Fluid)에서는 픽셀값 대신 퍼센트를 사용하고 고정비(Fixed)에서는 그리드 시스템과 같은 타입을 사용 합니다.
다음에는 그리드 시스템 사용법에 대해서 알아 보겠습니다…..^^

참고 사이트 : http://www.w3schools.com/bootstrap

부트스트랩 빌더….

JS2빌더 만들기에 앞서 요즘 몇가지 부트스트랩으로 만든 빌더를 테스트 해보았는데요.

그들 자체가 상당히 무겁고 과도한 제이쿼리를 사용해서인지 로딩도 길고 너무 늦게 페이지가 출력되는 현상이 있습니다.

테스트 빌더는 그누스트랩,이윰빌더,아미나빌더 입니다.

배추빌더와 굿빌더,그누XE는 부트스트랩을 안쓴관계로 속도가 빠른편이고 부트스트랩을 사용한 빌더중

제이쿼리를 제일 안쓴 그누스트랩이 그나마 빠른편에 속하고 아미나와 이윰빌더는 무겁게 작동을 합니다.

구글의 PageSpeed 사이트에서 속도 테스트 한 내역 입니다.

그누스트랩은 PC : 63/100 , 모바일 : 62/100, 이윰빌더는 PC : 26/100, 모바일 : 23/100,
아미나빌더는 PC : 42/100, 모바일 : 52/100 의 속도를 나타냅니다.

참고로 나누미에서 사용하는 APACHEDTD 빌더는 PC : 76/100, 모바일 : 60/100 이 나오네요…^^

그누스트랩 보다 빠른 로딩속도와 타빌더의 디자인을 믹싱한 빌더가 나오면 유저들에게 각광을 받을수 있을것 같네요.

빌더 제작자들이 다양한 방법으로 테스트 하고 있고 업그레이드에 대한 노력을 하시니 조만간 좋은 작품이 나오리라 봅니다.

저역시 이러한 문제를 간과하지 않고 빠른 빌더 만드는일에 주력 해야 겠습니다.

뜬금없지만 빌더를 만든다는게 하루아침에 되는 것이 아니기에 그들 개발자들에 대한 고마음을 느끼며 빌더를 사용해야 되겠습니다….^^