clearfix - 클리어 픽스를 사용하는 이유 왜 클리어픽스를 사용해야 하는지 먼저 알아볼까요? HTML 문서 구조에서 부모 요소가 자식 요소를 감싸고 있을 때, 자식 요소에게 float 형식을 적용하면 부모 요소가 자식 요소를 더 이상 감싸지 않게되고 높이 값을 파악하지 못하게 되는 버그가 발생합니다. 따라서 부모 요소의 높이 값이 0px로 출력되고, 전체적인 HTML 요소들이 뒤엉켜버리는 경우가 많습니다. 이 때 부모 요소가 다시 자식 요소를 감쌀 수 있게 float을 초기화(clear) 하여 버그를 고쳐주는(fix) 코드가 필요한데 이것을 clearfix라고 합니다. Clear 속성 - float 속성 해제하기 float 속성을 이용해 웹 페이지 요소를 왼쪽이나 오른쪽에 배치할 수 있습니다.float 속성을 사용한 요소 이후 요소들에도 똑같이 .. 더보기 [css] .circle .circle{ width:200px; height:200px; background:} .circle{ width:200px; height:200px; border-radius:8px; background:} .circle{ width:200px; height:200px; border-radius:50%; background:} .circle{ width:200px; height:200px; border-radius:50%; background: font-size:16px; text-align:center;} .circle{ width:200px; height:200px; border-radius:50%; background: font-size:16px; text-align:center;} @import.. 더보기 PHP 함수 hap( $a, &b); - 덧셈;cha( $a, &b); - 뺄셈 ; 더보기 html 태그에 직접 정의 HTML 태그에 직접정의 HTML 태그에 직접정의 HTML 태그에 직접정의 HTML 태그에 직접정의 더보기 overflow-y:scroll overflow-y:scroll : 내용물의 높이가 부라우즈 사이즈 보다 클경우 우측에 스크롤바를 표시한다는 겁니다.. 더보기 php 요약 php 요약 큰따옴표( " ) 를 echo문을 이용하여 출력시킬 시에는( \ ) +( " ) 를 이용한다. 또 $ 를 echo문을 이용하여 출력시킬시에도( \ ) +( $ ) 를 이용한다. ... 인터넷에서 정보검색을 할때 키워드로 사용된다. php 변수 선언시 $ 앞에 붙여줘야 한다.php 변수는 $my_name 와 같이 사용php 변수 알파벳 대소문자를 구분 php는 변수 선언시 데이터형을 지정하지 않는다.변수에 값을 입력하면 그 변수의 데이터형이 결정된다. 변수의 타입출력 함수는 gettype($var) 을 사용한다.변수의 데이터형과 값을 출력하는 함수는 var_dump($num)을 이용한다. 정수형으로 선언된 변수의 연산결과가 정수형 값의 표현범위(-2147483648 ~ 2147483647 )를.. 더보기 가변이미지에서 고려할 사항 가변이미지에서 고려할 사항 레티나급의 이미지를 크기만 줄여서 모바일 기기에 표시한다고생각해 보세요. 화면에 보여지는 모습은 작아 보여도 이미지 파일을 다운로드 하는데 꽤 오랜 시간이 걸립니다. 브라우저 에서는 사이트에 포함된 모든 이미지를 일단 불러온(preload) 후 기기에 따라 어떤 이미지는 감추고 어떤 이미지는 표시하는 방법을 사용합니다. 따라서 모바일 기기 입장에서는 불필요한 레티나 이미지파일까지 로딩하게 됩니다. 더보기 부트스트랩(bootstrap.css) 그리드 시스템 그리드 시스템(bootstrap) 부트스트랩에서는 12칼럽을 기본으로 하기 때문에 12칼럼에만 맞춘다면 1칼럼씩 세로로 또는 가로로 나열할 수 있습니다. 그리드시스템을 이용한 레이아웃을 만들 때 .col-이라는 키워드 다음에 화면종류를 나타내는 키워드 그리고 하나의 영역으로 묶을 칼럼개수를 숫자로 표시하여 하나의 클래스 스타일을 만듭니다. .col- 화면종류- 한영역으로 묶을 칼럼 개수 스마트 폰태블릿데스크탑큰화면.col-xs- 768px 미만 (x-small).col-sm- 768px 이상 ( small ).col-md-992px 이상 ( medium ).col-lg- 768px 1200px 이상 ( large ) 위와 같이 바깥부분을 로 묶어주어야 하고, 가장 바깥 부분은 로.. 더보기 미디어 쿼리 구문 - @media : 스타일시트 안에서 미디어 쿼리를 시작하는 속성 - only : 미디어 쿼리를 지원하지 않는 브라우저에서 미디어 쿼리문을 건너뛰도록 하기 위해 사용하는 접두어(prefix)입니다. 기본값이 only 이므로 생략해도 됩니다. - not : only 접두어 대신 not을 사용하면 그 뒤로 오는 모든 조건을 부정합니다.즉 조건에 맞지 않을 경우에 스타일 시트를 적용합니다. - 미디어 유형 : 화면인지 프린터인지, TV인지 등 미디어 쿼리를 적용할 기기를 지정하는 부분입니다. 쉼표(,)를 사용해 여러가지 미디어 유형을 나열 할 수 있습니다. 기본값은 all 입니다. 더보기 meta name="viewport" / initial-scale=1 / width-deviec-width 뷰포트 요즘처럼 스마트폰까지 고려한 반응형 웹을 제작할 때는 미디어 쿼리를 주로 사용합니다. 화면의 크기나 기기의 방향의 조건을 체크하여 사용하는 것이 뷰포트(viewport)입니다. 데스크탑에서의 1픽셀과 스마트폰의 1픽셀은 실제 크기가 다름에도 데스크탑 화면에서 사용하는 너비값을 스마트폰에도 그대로 적용해서 생기는 현상입니다. 스마트폰 화면을 웹 문서 너비에 맞추는 것이 아니라 문서의 콘텐츠를 스마트폰 화면의 너비에 맞춰 표시해야 합니다.이때 사용하는 것이 태그 입니다. width-deviec-width : 현재 기기의 px 크기에 맞추도록 브라우저에게 알려주고 웹 문서를 불러와 보여줍니다.initial-scale=1 : 문서를 불러와 화면에 표시할때 화면 너비에 맞추도록 기본 배율을 1로 지정합니다. 더보기 이전 1 ··· 3 4 5 6 7 8 9 ··· 16 다음