반응형

1. 버블정렬이란

  인접한 두 원소를 비교하여 정렬하는 알고리즘

 

2. 버블정렬 특징

  코드가 단순하여 구현이 간단하다

  하나의 요소가 끝까지 이동하기 위해 모든 요소와 교환되어야 하기 때문에 속도가 느리다

 

3. 버블 정렬 파이썬 코드

for i in range(len(a)-1, 0, -1):
    for j in range(0, i):
        if a[j] > a[j+1]:
            a[j], a[j+1] = a[j+1], a[j]

뒤에서 부터 탐색하는 이유는 안정정렬을 위해서라고 한다.

 def BubbleSort(a):
     for i in range(len(a)):
         for j in range(i , len(a)):
             if a[i] > a[j]:
                 a[i],a[j] = a[j],a[i]
     return a

버블정렬을 접하고 스스로 다음과 같은 코드를 구현해보았다

하지만 해당 코드는 가장 인접한 요소 끼리의 교환이 아닌 인덱스i 를 가진 값과 j 를 가진 값을 교환하는 것이기 때문에 선택정렬과 버블정렬이 섞인 코드라고 볼 수 있다고 한다...

오름/내림차순 정렬을 하기 위해 스스로 처음 만들었던 코드 형태라 그런지 이 코드가 익숙해서 계속 사용하게 된다...

반응형
저작자표시
반응형

1. 규칙의 충돌

css요소를 추가하다보면 css요소들이 겹쳐져 충돌하는 일이 일어난다. css는 우선순위에 따라 스타일을 적용시킨다

 

2. style 우선순위

1순위 !important
2순위 id선택자
3순위 class선택자
4순위 요소선택자
5순위 소스순서

5순위 순서의 경우

    .red{
      color: red;
    }
    .blue{
      color: blue;
    }
  <div class="red blue">red</div>
  <div class="blue red">blue</div>

다음과 같이 div class의 순서와 상관 없이 style sheet에서 나중에 적힌 스타일이 적용된다

 

3. 상속

CSS는 상속을 통해 부모 요소의 모든 속성을 자식에게 상속하지는 않는다

 

상속 되는 것 

> Text관련요소 visibility, opacity, font, color, line-heignt, text-align, white-space

 

상속 되지 않는 것

> box model 관련 요소 position 관련 요소 width/height, amrgin, padding, border, box-sizing, display, background,vertical-align, text-decoration, positon, top/right/bottom/left, z-index, overflow

 

	.red{
      color: red;
    }

    .border{
      border: 1px solid blue;
    }
<div class="red border">
      상위 태그입니다
    <div>
      하위 태그입니다
    </div>
  </div>

css의 border가 하위 태그에는 적용이 되지 않은 것을 확인할 수 있다

반응형
저작자표시
반응형

1. float 요소

이미지의 좌, 우측에 텍스트를 둘러싸는 레이아웃을 위해 도입된 레이아웃으로
이미지가 아닌 다른 요소에 적용해 엡 사이트의 전체 레이아웃을 만드는데 까지 발전 했다.

css를 처음 배우던 4년 전만해도 float로 모든 화면을 처리했던 것 같은데 float을 통해 요즘은 화면구성을 잘 하지 않는다는 말을 들었다.
4년전에는 신 기술이었는데 4년이라는 짧은 시간동안 이렇게 빠르게 발전한건지,,, 아니면 그냥 그 때 내가 몰랐던건지
배우던 당시에는 table을 통해서 화면 구성을 할 수 있고 table 을 이용한 화면 구성이 오래된 방식, float최신방식이라 배웠었는데...
flexbox를 처음 접해서 얼떨떨하다

 

Float 속성

  • float: left;      요소를 왼쪽으로 정렬시킨다
  • float: right;    요소를 오른쪽으로 정렬시킨다
  • float: none;   기본 값

 

2. float 으로 화면 구성하기

    .box{
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: burlywood;
    }
    .float-left{
      float: left;
    }
    .float-right{
      float: right;
    }

css

<body>
  <div>
    <div class="box float-left">
      box1
    </div>
    <div class="box float-left">
      box2
    </div>
    <div class="box float-right">
      box3
    </div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. At repellendus impedit similique. Eos, illum aliquam veniam reiciendis quos iure dignissimos nobis quisquam voluptate quod accusamus nemo animi. Deserunt, nobis pariatur. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde deserunt tenetur eos velit maxime cumque quas quos? Facilis nobis quisquam minus, quasi quidem alias esse perferendis reiciendis delectus! Aliquam, architecto! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi nesciunt quo doloremque aperiam fugiat. Distinctio eveniet illum modi expedita atque nemo libero doloremque qui! Rerum esse magnam est asperiores molestiae! Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea sunt, veniam sapiente amet fugit quidem dolore obcaecati recusandae totam tenetur aliquam nulla quisquam esse, tempora suscipit ipsa quam cum delectus.
  </div>

html

box1, 2에 float left / box 3에 float right 속성을 주면 다음과 같이 box가 이동하는 것을 볼 수 있다.

 

3. float 속성 지우기

float 속성을 주지 않는 non-float-box를 만들어 박스들의 하단에 위치시키면 아무 클래스의 영향을 받지 않은 non-float-box는 화면의 상단으로 이동한다(float 박스들은 화면에 띄워져 있는 상태)

그럼 이렇게 화면이 깨지는데 이걸 방지하기 위해 float 속성을 제거해줘야한다.

.clearfix>::after{
    content:"";
    display:block;
    clear:both;
}

 

.non-float{
      clear: both;
    }

non float box가 div 로 만들어져 block 속성을 가지고 있기 때문에 글까지도 아래로 이동하는 모습을 볼 수 있다

 

float을 통해 정렬을 한 후 정렬이 필요하지 않은 요소를 사용하는 시점에서 clear: both를 사용한다고 생각하면 될 것 같다

반응형
저작자표시

+ Recent posts

티스토리툴바