오늘의 코딩/웹프로그래밍 (5) 썸네일형 리스트형 [PHP] 생활코딩(7.5~) https://opentutorials.org/course/3130 WEB2 - PHP - 생활코딩 수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 PHP에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. 수업대상 이 수업은 1억개의 웹페이지를 생산하면�� opentutorials.org jet brain phpstorm 설치 https://dololak.tistory.com/641 [phpStorm] 첫 프로젝트 생성해보기. Hello World. Jetbrains phpStorm 첫 프로젝트 생성해보기 PhpStorm에서 Create New Project를 클릭합니다. 이미 phpStorm이 실행된 상태라면 왼쪽 상단 메뉴에서 File > N.. 6. 1. Transition Transition : 웹 애니메이션을 설정할 수 있다! JS에서도 설정할 수 있지만 css에서 구체적인 설정을 하는 것이 편함. .box { width:100px;height:100px; background-color:slategray; color:#fff; text-align:center; line-height:100px; transition:all 1s ease-in; } var box = document.querySelector(".box"); box.addEventListener("click",function(evt){ evt.target.style.height="200px"; evt.target.style.width="200px"; }); 2. Transform tra.. 4. 1. position 프로퍼티를 이용한 layout position은 위치값을 조정하는데에 사용하는 속성이다. .wrap > div:nth-child(3) { position:fixed; top:0px; left:0px; } static : 기본값. 위치가 지정되었다고 표현하지 않는다. relative : 별도의 프로퍼티를 지정하지 않는 한 static과 동일하게 동작한다. 원래 위치에서 위치가 조정된다 absolute : 가장 가까운 곳에 위치하고, position이 static이 아닌 조상 엘리먼트에 상대적으로 위치가 지정된다. (tip:기준값이 되길 원하는 조상 엘리먼트의 position값을 relative로 설정해두면 좋다!) fixed : 스크롤에 영향을 받지 않는 고정된 배너 2.float 기.. 2. CSS 스타일 시트 언어 1. CSS의 구성과 선언 방법 등 기본 사용법 selector { property : value; } inline : html 태그 안에 적용(최우선 적용) html 안에 css가 들어있으면 유지보수가 어렵다. internal: 별도의 css 파일을 관리하지 않아도 된다.(별도의 브라우저에 요청을 보내지 않음) external: 외부파일(.css)로 지정하기 in->inter->exter 순으로 스타일이 적용됨 .html Lorem ipsum dolor sitamet, consectetur adipisicing elit. .css dev>p{ border:1px solid slategray; } 2. CSS에서 상속 : 상위에서 설정된 스타일을 하위에서도 사용한다. div>ul>li*2 internal.. 1 1. HTML 들어가기 Hello world 네이버로 갑니다. 2. HTML 태그 tag는 그 의미에 맞춰서 사용해야 한다. (https://www.w3schools.com/tags/ref_byfunc.asp) Hello world 반갑습니다. 사과 바나나 메론 3. 레이아웃을 위한 태그 company name home About Map About us What we do? Loerm ipsum dolor sit amet, d.. Copyright @codesquad ul : unordered list ol : ordered list dl : definition list (5) ID와 Class ID : 하나만있음. 고유한 이름 Class : 여러개. 같은 스타일을 공유하길 원할 때 사용 text... .. 이전 1 다음
