#.HTML, CSS 기초와

by

색인



6. BMX 사이트 상단바 생성


전체 제조 공정 요약

'추천 관련글,

https://sihyun1118.98

BMX사이트 상단바 만들기

페이지 제목 BMX a{ 디스플레이: 블록; 텍스트 정렬: 가운데; 글꼴 크기: 3 rem; 텍스트 장식: 없음; 검정색; 글꼴 두께: 굵게; 문자 간격: -.2rem; } 메뉴바 만들기 (1) – 무식한 방법,, | 브랜드 | 비주얼 | 스타일 | 미디어

sihyun1118.tistory.com

메뉴 모음 만들기 – 요약 및 최종 답변

HTML

<!-- (div>a)+(section>nav*7>a(href="#"){ITEM$}) -->
<div><a href="#">BMX</a></div>

<div><a href=""></a></div>
<section>
  |<nav><a href="">BRAND</a></nav>
  |<nav><a href="">VISUAL</a></nav>
  |<nav><a href="">STYLE</a></nav>
  |<nav><a href="">MEDIA</a></nav>
  |<nav><a href="">NEWS</a></nav>
  |<nav><a href="">STORE</a></nav>
  |<nav><a href="">CUSTOMER</a></nav>|
</section>

CSS

a{
  color: black;
  text-decoration: None; <!--밑줄 제거를 위해-->
}
div{
  text-align: center;
}
div > a{
  font-weight: bold;
  font-size: 4rem;
  letter-spacing: -.4rem
}
section{
  font-weight: bold;
  text-align: center;
}
section > nav{
  width: 100px;
  display: inline-block; <!--inline은 width를 안먹음-->
}
section > nav > a{
  display: block; <!-- 글자를 꽉차게 -->
}
section > nav:hover > a{
  color: red;
}

자바 스크립트 워밍업(이중 루프)

console.clear();

for (let dan = 2; dan <= 3; dan++){
  console.log("== 구구단 " + dan + "단 ==");
  for (let i = 1; i<=5; i++){
    console.log(dan + "*" + i + "=" + dan *i);
  }
}

Java Script Warm-Up(다른 루프 사용)

console.clear();

// 소스1
console.log("== 소스 1 : 1 부터 10까지 ==")
for (let i = 1; i <= 10; i++){
  console.log(i);
}

// 소스2
console.log("== 소스 2 : 10부터 1까지 ==")
for (let j = 10; j >= 1; j--){
  console.log(j);
}

// 소스3 
console.log("== 소스 3 : 1부터 10까지 짝수만 출력 ==")
for (let k = 1; k <= 10; k++){
  if ( k % 2 == 0 ){
  console.log(k);}
}

7번째 사진

  • img 태그는 인라인 속성입니다. 그러나 너비는 특별한 방식으로 설정됩니다.
  • 높이나 너비를 지정하기만 하면 이미지 고유의 비율로 크기가 조정됩니다.
  • 둘 다 지정하면 (object-fit: cover)를 사용하여 이미지가 손상됩니다…
img{
  width: 200px;
  height: 1200px;
  object-fit: cover; <!-- 비율을 맞추기 위해 설정된 너비와 높이에 맞게 자름-->
}

고유한 너비와 높이가 있기 때문에 부모의 너비가 더 작아도 부모의 너비를 초과하면서 크기를 유지합니다.

– 크기 지정시 n%인 듯

교육. 이미지 정렬


6가지 방법(1. 이미지 정렬)

https://sihyun1118.99

교육. 이미지 정렬

방법 1. nbsp 및 br HTML CSS img { width:300px; } 방법 2. nbsp 및 br을 사용하여 div HTML CSS img { width:300px; } 방법 3. nbsp 및 br을 사용하여 div HTML CSS img { w

sihyun1118.tistory.com

자바 스크립트 워밍업(함수)

console.clear();

let k = function() {
  console.log("JavaScript 함수")
}

k()
  • 함수를 만들 때 두 단어를 사용해야 하는 경우 단어 뒤의 첫 번째 단어만 대문자로 표기하는 경우가 많습니다. 예: printHello

매개변수

console.clear();

let plus = function(a, b) {
  console.log(a + b)
}

plus(10, 20)

사용된

console.clear();

let hello = function(lang) {
  if (lang == "한국어"){
    console.log("안녕")
  }
  else if(lang == "일본어"){
      console.log("곤니찌와")
    }
  else{
    console.log("Hello")
  }
}

hello("한국어")
hello("영어")
hello("일본어")

8. 림, 패딩 및 인라인 대 인라인 블록


div*5>롬 +테이블

: 텍스트로 젠 인코딩

div {
    width:300px;
    height:300px;
    background-color:red;
    vertical-align:top; /* 위로 맞춤 느낌 */
    display:inline-block;
    /* 박스의 바깥쪽 여백 */
    margin-top:10px;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:10px;
    margin: 10px; /* 위 4줄과 의미가 같다. */
    
    /* 박스의 안쪽 여백 */
    padding-top:10px;
    padding-left:10px;
    padding-right:10px;
    padding-bottom:10px;
    padding:10px; /* 위 4줄과 의미가 같다. */
}
  • 패딩과 여백은 인라인 블록과 블록에 적용되지만 인라인에는 적용되지 않습니다(좌우 가능).

패딩 및 여백이 있는 중앙 이미지 정렬(2. 보더 및 패딩 적용)

https://sihyun1118.99

교육. 이미지 정렬

방법 1. nbsp 및 br HTML CSS img { width:300px; } 방법 2. nbsp 및 br을 사용하여 div HTML CSS img { width:300px; } 방법 3. nbsp 및 br을 사용하여 div HTML CSS img { w

sihyun1118.tistory.com

Java Script Warm Up (Return & Create 기능)

console.clear();

function plus(a, b){
  return a + b
}

let c = plus(10,20)
console.log(c)

함수 만들기

console.clear();
//n부터 m까지 출력
function printNToM(n, m){
  for ( let i = n; i <= m; i++){
    console.log(i)
  }
}
printNToM(3,5)

//n부터 m까지 더하기
function getNtoMSUM(n, m){
  let s = 0;
  
  for (let i = n; i <= m; i++){
    s += i
  }
  return s
}
console.log(getNtoMSUM(3,5))

//n부터 m까지 짝수만 더하기
function getNtoMEvenSUM(n, m){
  let s = 0;
  
  for (let i = n; i <= m; i++){
    if ( i % 2 == 0){
    s += i
    }
  }
  return s
}

console.log(getNtoMEvenSUM(1,5))

9. n번째 자식

  • 특정 아이템만 선택할 수 있는 능력
  • section > div:nth-child(2) -> div(및 개념)인 동안 Section의 두 번째 자식입니다.
  • 섹션 > div:nth-of-type(2) -> div의 두 번째

HTML: 섹션>div*20 +테이블

div {
  width:15%; /* 부모 엘리먼트 너비 기준 */
  height:100px; <!--높이에는 %가 안된다-->
  background-color:red;
  display:inline-block;
}
div:first-child {<--div 첫 번째 엘리먼트-->
  background-color:blue;
}
div:nth-child(2) {<--div 두 번째 엘리먼트-->
  background-color:gold;
}
div:last-child {<--마지막 엘리먼트-->
  background-color:green;
}
div:nth-last-child(2) {
  background-color:pink;
}
section > div:nth-of-type(2)
  background-color:pink;
}
section > div:nth-last-of-type(2)
  background-color:pink;
}

무지개 운동을 하다


HTML

섹션 > div*70

CSS

section{
  border: 10px solid red;
  text-align:center;
}
section > div{
  width: 13%;
  height: 100px;
  background-color: red;
  display: inline-block;
}
section > div:nth-child(7n+2){
  background-color: orange;
}
section > div:nth-child(7n+3){
  background-color: yellow;
}
section > div:nth-child(7n+4){
  background-color: green;
}
section > div:nth-child(7n+5){
  background-color: blue;
}
section > div:nth-child(7n+6){
  background-color: navy;
}
section > div:nth-child(7n+7){
  background-color: purple;
}

자바 스크립트 워밍업(객체)

console.clear();
//소스1
let person = {};
person.이름 = "홍길동"
person("성별") = "남자"

console.log(person)

//소스2
let person2 = {
  이름:"홍길순",
  성별:"남자",
  나이:22
}
person2.키 = 170
person2.성별 = "여자"

console.log(person2);


//소스3
function 자기소개(a사람) {
  console.log("== 자기소개 시작 ==");
  console.log("이름 : " + a사람.이름);
  console.log("성별 : " + a사람.성별);
  console.log("나이 : " + a사람.나이);
};

let a사람1 = {
  이름:"홍길동",
  성별:"남자",
  나이:22
};

let a사람2 = {
  이름:"임꺽순",
  성별:"여자",
  나이:20
};

자기소개(a사람1)
자기소개(a사람2)


강하게 함

console.clear();

let a사람1 = {};
a사람1.이름 = "임꺽정";
a사람1.자기소개 = function() {
  console.log("안녕하세요. 저는 " + this.이름 + " 입니다.");
};

let a사람2 = {};
a사람2.이름 = "김철수";
a사람2.자기소개 = function() {
  console.log("안녕하세요. 저는 " + this.이름 + " 입니다.");
};

a사람1.자기소개();
a사람2.자기소개();

출구

“안녕하세요. 임꺽정입니다.”

“안녕하세요. 김철수입니다.”

10. 블록 요소 정렬

인라인 블록 대신 ex.div 블록 태그 정렬(텍스트 정렬 방법 사용 안 함)

– 마진 사용


div {
    width:100px;
    height:100px;
    margin-left:0; /* 이 코드는 사실 쓸 필요는 없다. 왜냐하면 원래 0 이니까 */
    background-color:red;
}

div:nth-child(2) {
    background-color:gold;
    margin-left:auto;
    margin-right:auto;
}

div:nth-child(3) {
    background-color:green;
    margin-right:0;
    margin-left:auto;
}

section {
    border:5px dotted gray;
}

블록 요소 정렬 연습(3. 블록 요소 정렬)

CSS 선택기 연습 게임

https://flukeout.github.io/

Java Script 워밍업(배열)

console.clear();

let ages = ();

ages.push(22);
ages.push(32);
ages.push(42);
ages(3) = 55;

console.log(ages);
console.log(ages(0));

console.log(ages.length);

출구

(22,32,42,55)

22

4

배열 사용

console.clear();

let ages = (10, 20, 30, 40);

let agesSum = 0;

for (let i = 0; i < ages.length; i++){
  agesSum += ages(i)
}

console.log("나이 총합 : " + agesSum);
console.log("나이 평균 : " + agesSum / ages.length);

강의 : https://class101.net/en/classes/5fb5d4c5c64f67000daa54de/lectures/5fbb0fec7902290013fb29b8