week_03 HTML&CSS&JavaScript 1/2

ㄹㅇ 그냥 강의 정리용

<link ref="style.css" href="style.css">

.중앙정렬 {
    margin-left: auto;
    margin-right: auto;
}

margin - border - padding - content

box의 크기는 가로 width+테두리(border/padding)*2, 세로 height+테두리(border/padding)*2

box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1);
box-shadow: 가로 세로 블러 범위 rgba(red, green, blue, alpha_투명도);

div == section == article

우측 정렬하는 쉬운 방법

.name {
    font-weight: bold;
    <!-- text-align: left;-->
    float: right;
}

=> 완전 동동 떠다니게 할 것이 아니라면, 저걸 div로 한데 묶어서 overflow: hidden; 설정하는 거 잊지말 것.

<a href="http://image.com"><img class="myimg" src="path/image.png"></a>
.myimg {
    width: 20px;
    height: 20px;
}

JavaScript

html의 <script>에 작성

<script>document.write("웹 페이지에 출력")</script>

js 파일에 따로 작성

document.write("에라 모르겠다")

<script src='path/jsfile.js'></script>

var / let / const name = value;
document.write(typeof name);
parseInt(Math.random * 1); // 0~1 실수의 정수화 => 0

var array = \[];
array.push(0);
array.indexOf(value); // 있으면 index, 없으면 -1
array.length;
array.sort(); // 사전식 정렬
array.sort((a,b)=>a-b);  // 숫자 오름차순 (내림차순: b-a)

<script>
    document.write("<div class='ball ball1'>" + lotto[0] + "</div>");
</script>

<script>
    var n = document.getElementById('name').value;
    let k = document.getElementById('name').innerHTML;
</script>

document.getElementById('name').value:

: 주로 <input> 요소 또는 <textarea>와 같은 입력 요소에서 사용.
value 속성을 통해 입력 요소에 입력된 값을 가져옴.
일반적으로 사용자가 입력한 텍스트 검색에 사용.

document.getElementById('name').innerHTML:

: HTML 요소의 내부 HTML 콘텐츠를 가져옴.
텍스트 요소 외에도, 내부 HTML 콘텐츠를 포함한 대부분의 요소에서 작동.
요소 내부의 HTML 마크업을 가져오며, 텍스트뿐만 아니라 HTML 태그도 포함함.

<h1>자기소개</h1>
<textarea class="form-control" rows="3" id="jasoseol">당신 인성 문제가 있습니까?</textarea>
<span id="count">(0/200)</span>
<script>
  var content = document.getElementById('jasoseol').value;
  document.getElementById('count').innerHTML = '('+content.length+'/200)';
</script>

함수 & 이벤트 / 이벤트 핸들링

<textarea onkeydown="counter()" class="form-control" rows="3" id="jasoseol">저는 인성 문제가 없습니다.</textarea>
<span id="count">(0/200)</span>
<script>
  function counter() {
    var content = document.getElementById('jasoseol').value;
    if (content.length > 200) {
      content = content.substring(0,200);
      document.getElementById('jasoseol').value = content;
    }
    document.getElementById('count').innerHTML = '(' + content.length + '/200)';
  }
  counter();
</script>

정리

<body class='container'>
    <h1>자기소개</h1>
    <textarea class="form-control" rows="3" id="jasoseol" onkeydown="counter();">저는 인성 문제가 없습니다.</textarea>
    <span id="count">(0/200)</span>
    <script>
        function counter() {
            var content = document.getElementById('jasoseol').value;
            if (content.length > 200) {
                content = content.substring(0,200);
                document.getElementById('jasoseol').value = content;
            }
            document.getElementById('count').innerHTML = '(' + content.length + '/200)';
        }
        counter();
    </script>
</body>

'Study with me > TECH!T back-end shcool 7' 카테고리의 다른 글

week_04 JAVA 8/11 (0)	2023.11.06
week_03 HTML&CSS&JavaScript 2/2 (8)	2023.11.03
week_03 MySQL 2/2 (0)	2023.11.01
week_03 MySQL 1/2 (0)	2023.10.31
week_03 GIT +@ (0)	2023.10.31