본문 바로가기

WebApp

 (100)
JavaScript의 이해 - onclick 목표Javascript를 통해 웹페이지에 button을 활성화시키고 click했을때 변화를 주고 싶음 문제body tag에 style속성을 주기 위해서는 "이 속성을 주고자하는 tag가 누구인가?" 즉 body태그라는 것을 웹브라우져에게 알려주어야하는데 이 방법을 Javascript 문법으로 어떻게 입력하느냐 그리고 어떻게 속성을 입력하느냐(Javascript를 통하여 제어하고자 하는 tag를 선택, css를 입력) 해결 0. Javascript in html의 방법으로 button을 만들고, 클릭했을때 body tag에 style 속성이 생겨나도록 하기 위해서는 1. == 버튼생성 2. 버튼을 클릭했을때 라는 event가 필요 ==onclick event 3. night라는 버튼을 클릭했을때 body ..
JavaScript의 이해 - data types JavaScript data types의 기본 1.string(문자열) 기본적으로 "" 혹은 ''안에 문자열이 옴 2.Number(숫자) 기본적으로 ""등은 쓰지 않고 숫자가 오며 +, -, *, / 등을 사용하는데 이를 이항연산자 중 산술연산자라 한다 3.variable(변수) x=1 에서 x는 variable(변수) =는 대입연산자 1은 constant(상수)라고 부르며 대입연산자는 두가지 해석이 가능하다 일반적으로는 "오른쪽항의 값을 왼쪽의 변수에 대입한다"는 의미이고 또한 "좌항과 우항을 결합하여 우항의 값을 만든다"고 해석하기도 한다
JavaScript의 이해 1. tag body tag 안에 script tag를 이용하여 document.write(); 를 입력 document.write();는 JS코드중 웹페이지에 글씨를 출력할떄 쓰는 코드 2. event 사용자가 어떠한 행위를 했을때 특정한 사건(event)가 일어나도록 코드를 작성하는 것으로 onclick="" 해석= 클릭했을때~ onchange="" 해석= 안의내용을 바꿧을때~ onkeydown="" 해석=커서를 바깥으로 옮겼을때~ 등(event attribute)이 있으며 해석을 하자면 위 속성들의 값으로는 항상 JavaScript의 코드가 들어와야하며 이 값을 웹브라우져가 기억하고 있다가 사용자에 의해 속성의 행위가 이루어졌을때 속성이 속해있는 tag에 그 기억값을 JavaScript의 문법에 따..
css의 이해- 중복의 제거 새로운 파일 style.css를 추가하고 기존 html 파일의 란에 위와같은 링크를 추가하면 stlye.css의 하나의 파일에 같은 을 쓰는 html 파일들과 쉽게 연결시킬 수 있다.
css의 이해-반응형디자인 1.mediaquery와 @media의 해석 mediaquery란 어떠한 조건을 갖추었을때만 작동하도록하는 css이다 @media(max or min -width:600px){ #pw{display:block;} } 해석:화면의 너비가 600px보다 작을때 혹은 클때 #pw의 화면의 속성을 block으로 하라는 의미 이다 *문제발생 실습과정중 아무리 수정을 해도 mediaquery가 chrome에서는 작동하지 않았고 혹시나 하여 익스플로러로 열어보니 익스플로러에서만 작동하였다. *해결 구글링을 통하여 안에 를 추가해야한다는 것을 알게되어 실행하니 정상적으로 작동하였다.
css의 이해-grid 1., tag ★ tag는 ★이 block 속성을 가지게 하는 tag 이며 ★ tag는 ★이 inline 속성을 가지게 하는 tag이다. 2. display:grid gird방식은 하나의 부모 div 안에 있는 자식 div를 묶는 것으로 위 방식은 grid-template-columns 방식으로 기억할 것 이를 표현하는 값으로 fr을 쓰는데 fr이란 비율을 나타내며 예를 들어 grid-template-columns : 2fr 1fr; 이란 2:1의 비율을 나타낸다 ※최신동향 html css등을 확인할 수 있는 사이트 https://caniuse.com/#home
css의 이해- box model 1. border(테두리) html의 tag는 기본적인 성격에 따라 border가 화면전체를 쓰기도 하고 자신의 content 만큼의 크기만큼을 쓰기도 한다 ex). h1=화면 전체 크기 a=자기 자신 크기 이때 화면전체의 테두리를 쓰는 tag : block level element 자신의 content만큼의 테두리를 쓰는 tag : inline element 라고하며 display:blcok or inline 의 입력으로 그 성격을 바꿀수 있다. 2. box model css의 의미 ●padding: x px; 은 텍스트와 테두리 사이의 간격 ●margin: x px;은 테두리와 그 바깥 공간과의 간격 ●width:x px;은 테두리 자체의 너비 ●height:x px:은 테두리 자체의 높이
css의 이해-selector 1. css selector인 class의 해석과 응용 예제1의 경우 ● HTML를 해석하자면 a tag를 saw 라는 그룹(class)로 묶는다 라는 뜻이고 ● 를 해석하자면 saw라는 class로 묶인 모든 tag에 대하여 color를 blue로 한다 라는 뜻이다. 또한 HTML 와 같이 하나의 tag에 2개 이상의 class이름을 지정할 수 있고 구별은 띄어쓰기로 표현한다 2. css selector의 우선순위 같은 그룹의 경우는 마지막 즉 가장 최신의 것이 우선순위를 가지며 다른 그룹의 경우는 id>class>element(직접 tag를 지정하는 경우 예제1의 a{} selector) 순서의 우선순위를 가진다 3. selector의 응용 예제2의 #pw ol 로 작성된 selector는 id가 p..

티스토리툴바