본문 바로가기

분류 전체보기590

JavaScript inline 방식 - 태그에 직접 자바스크립트를 기술하는 방식 (비권장) html에서 속성중에 onclick = "alert('Hello world')" 빨간 부분에는 클릭을 했을 때 일어날 자바스크립트 코드를 입력한다. script - 정보와 제어를 구분한다는 점에서 바람직 외부 파일로 분리 - 유지보수 측면에서 더 바람직 //js파일 var hw = document.getElementById('hw');hw.addEventListener('click', function(){ alert('Hello world');}) 2017. 2. 27.
css 상속, cascading, 레이아웃, box-sizing, 마진겹침, 포지션 상속 상속은 부모 엘리먼트의 속성을 자식 엘리먼트가 물려받는 것을 의미한다. 하지만 모든 속성이 상속받는것은 아니다. 상속되면 별로 좋지않은 속성이 있기 때문이다. 상속되는지 아닌지 볼 수 있는 사이트https://www.w3.org/TR/CSS21/propidx.html CASCADING하나의 태그에 여러 css효과가 중첩되었을 때 우선순위 0. !important1. style attribute2. id selecter3. class selecter4. tag selecter 순위가 내려갈수록 더 포괄적인 범위이다. 레이아웃 인라인 vs 블럭레밸인라인 : 화면 전체(한줄)를 사용하는 태그이다.블럭레밸 : 화면의 일부(자기크기만큼)를 차지하는 태그이다. style태그에서 아래의 속성으로 속성을 바꿀 수.. 2017. 2. 22.
css 속성 정리(폰트, 타이포그래피) font-size 단위 px : 크기가 고정em : 브라우저의 설정에 따라 폰트의 크기가 달라짐rem : 브라우저의 설정에 따라 폰트의 크기가 달라짐 (사용 권장!) colorcolor:red or #ffffff; 이름 or 16진수 rgv(0,0,0) RGB방식 text-align text-align:left or right or center or justify(양쪽이 균등하게 보임) font font-fmaily : arial, vendana, "Helvetica Neue", monospace; 사용할폰트 1, 2, 3순위와 글꼴 장식(Serif, Sans-serif) font-weight : bold;line-height : 1.2(기본값) 줄간격font : 여러 속성들을 축약형으로 표현하는 속성형.. 2017. 2. 21.
css 선택자 정리 CSS선택자 종류 1. 태그명{ } 2. #id{ } 3. .class{ } 4. ul li{ } 이것은 ul태그 밑의 li태그에만 적용하겠다는 의미이다. 5. #lecture>li{ } id가 lecture인 부분의 바로 밑 li태그에만 적용한다. 6. ul ,il{ } 여러 태그에 동시에 효과를 적용할 수 있다. 링크와 관련된 가상 클래스 선택자 : 엘리먼트들의 상태에 따라서 마치 클래스선택자처럼 여러 엘리먼트를 선택할 수 있다는 점에서 붙은 이름가상클래스 선택자는 a태그뿐만 아니라 다른태그에도 사용이 가능하다. a:link - 방문한적이 없는 링크a:visited - 방문한적이 있는 링크 a:activie{ //url을 누르고 있으면 url색을 초록색으로 바꾼다.color:green; }a:hove.. 2017. 2. 21.

티스토리툴바